More Related Content
Similar to Workshop Advance CSS3 animation (20)
Workshop Advance CSS3 animation
- 1. Workshop : Advance Animating with CSS3
IT106 Multimedia Technology (STEP by STEP ) By Lecturer Nongkran Khomwichai
- 3. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="transition-primer.css">
</head>
<body>
<div class="animate-this"></div>
</body>
</html>
.animate-this {
height: 200px;
width: 200px;
background-color: #f00;
margin: 0 auto;
}
- 5. .animate-this {
height: 200px;
width: 200px;
background-color: #f00;
margin: 0 auto;
transition: transform 0.5s ease;
/*Support web browser*/
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
}
.animate-this:hover {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
- 8. 3D-Transform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="3d-transform.css">
</head>
<body>
<div class="animate rotate"><h4>Rotate</h4></div>
<div class="animate rotateX"><h4>RotateX</h4></div>
<div class="animate rotateY"><h4>RotateY</h4></div>
<div class="animate rotateZ"><h4>RotateZ</h4></div>
<div class="animate rotateXYZ"><h4>RotateXYZ</h4></div>
</body>
</html>
- 10. 3D-Transform.css
.animate {
text-align: center;
height: 100px;
width: 100px;
background-color: #f00;
margin: 10px;
float: left;
transition: transform 0.5s ease;
/*Support Web Browser*/
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
}
- 12. 3D-Transform.css
/*4 rotateX*/
.rotateX:hover {
transform: rotateX(360deg);
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
}
/*5 rotateY*/
.rotateY:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
}
- 13. 3D-Transform.css
/*7 rotateX*/
.rotateXYZ:hover {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
-o-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
- 14. Animation-primer
แอนนิเมชัน-ไพรเมอร์ ด้วยการทางาน property animation
CSS3 สามารถสร้าง Animation ขึ้นมาเองได้ กฎการใช้ของ CSS3 @keyframes ในการสร้าง Animation
ขึ้นมาใน CSS3 นั้น ต้องทราบกฎการใช้ก่อน ซึ่งก็คือ เมื่อไหร่ที่สร้างภาพเคลื่อนไหวขึ้นมา ต้องทาการระบุรูปแบบ
ของ CSS ภายในกฎของ @keyframes แล้ว Animation ที่สร้างขึ้นมาจะค่อย ๆ เปลี่ยนจากรูปแบบปัจจุบันไปเป็น
รูปแบบที่กาหนดได้ และในตัวอย่างนี้ใช้คาสั่ง infinite alternate
- 15. Property Description
@keyframes ระบุคุณสมบัติของ Animation
animation เป็นการกาหนดคุณสมบัติของ Animation ยกเว้น Animation-play-state
animation-name เป็นการระบุชื่อของ Animation @ keyframes
animation-duration เป็นการกาหนดระยะเวลาเป็น นาที หรือ เป็น วินาที ที่ใช้ในการครบรอบ 1 รอบ 0เป็นค่าเริ่มต้น
animation-timing-function อธิบายถึงความก้าวหน้าของ Animation ในหนึ่งรอบ
animation-delay ระบุเมื่อการเคลื่อนไหวจะเริ่มต้น 0 เป็นค่าเริ่มต้น
animation-iteration-count ระบุจานวนครั้งการเคลื่อนไหวจะถูกเล่น 1 เริ่มต้น
animation-direction ระบุว่า Animation ควรเล่นหรือไม่ควรเล่นในสิ่งที่ตรงข้ามกับเงื่อนไขอื่น
animation-play-state ระบุว่า Animation ให้ทางานหรือหยุดชั่วคราว
CSS3 Animations Properties
- 17. Animation-primer.css
.animate-this {
width: 200px;
height: 200px;
background-color: #060;
position: absolute;
/*insert animation left to right*/
animation: left-to-right 2s ease 0s infinite alternate;
-webkit-animation: left-to-right 2s ease 0s infinite alternate;
-moz-animation: left-to-right 2s ease 0s infinite alternate;
}
/*animation: left-to-right 2s;
-webkit-animation: left-to-right 2s;
-moz-animation: left-to-right 2s;
-webkit-animation-name: left-to-right;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: paused;*/
- 20. Keyframes.css
.animate-this {
width: 200px;
height: 200px;
background-color: #060;
position: absolute;
/*insert animation left to right*/
animation: left-to-right 2s linear 0s;
-webkit-animation: left-to-right 2s linear 0s;
-moz-animation: left-to-right 2s linear 0s;
}
/*animation: left-to-right 2s;
-webkit-animation: left-to-right 2s;
-moz-animation: left-to-right 2s;
-webkit-animation-name: left-to-right;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: paused;*/
- 23. Portfolio-Animation.html
<body>
<!--1. create portfolio-->
<div class="portfolio">
<div class="portfolio-item graphic-design">
<img src="img/graphic-bg.jpg" alt="Graphic Design">
<div class="portfolio-description">
<h4>Graphic Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora maiores explicabo suscipit quas rem necessitatibus!</p>
</div>
</div><!--end of graphic-design-->
</div><!--end of portfolio-->
</body>
- 24. Portfolio-Animation.html
</div><!--end of graphic-design-->
<!--2. create portfolio web-design-->
<div class="portfolio-item web-design">
<img src="img/web-bg.jpg" alt="Web Design">
<div class="portfolio-description">
<h4>Web Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora maiores explicabo suscipit quas rem
necessitatibus!</p>
</div>
</div><!--end of web-design-->
- 25. Portfolio-Animation.html
<!--3. create portfolio video-->
<div class="portfolio-item video">
<img src="img/video-bg.jpg" alt="Video">
<div class="portfolio-description">
<h4>Video</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Tempora maiores explicabo suscipit quas rem necessitatibus!</p>
</div>
</div><!--end of video-design-->
</div><!--end of portfolio-->
</body>
</html>
- 27. Portfolio-Animation.css
/*1*/
html, body, p, h1, h2, h3, h4, h5, h6, img { margin: 0; padding: 0; }
/*2*/
html { font: 16px Helvetica, Tahoma, Arial, sans-serif; }
/*3*/
.portfolio {
width: 900px; /*ขอบเขตขนาดความกว้างของ portfolio ที่สามารถแสดงได้*/
margin: 0 auto;
}
- 32. Positionตาแหน่งที่ใช้กาหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ ทั้ง relative absolute และ
fixed กาหนดตาแหน่งด้วยการใช้ property left, top, right และ bottom
static การจัดวางตามปกติที่เป็น default
relative การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกาหนดขึ้นมาก่อนจะอยู่ด้านล่าง
และวัตถุที่กาหนดทีหลังจะอยู่ด้านบน และจะกาหนดตาแหน่งโดยนับจากจุดที่วัตถุนั้นๆอยู่
absolute การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกาหนดขึ้นมาก่อนจะอยู่ด้านล่าง
และวัตถุที่กาหนดทีหลังจะอยู่ด้านบน และ่่จะกาหนดตาแหน่งจากขอบของ container ที่บรรจุ วัตถุ
นั้นๆ
fixed การจัดวางที่กาหนดตาแหน่งจากขอบของ Window นั้นๆ
* ต้องกาหนดตาแหน่งทั้งในแนวตั้ง และแนวนอน
* ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ในตาแหน่งที่กาหนด (IE7)
- 35. Portfolio-Animation.html
<!--1. create portfolio-->
<div class="portfolio">
<div class="portfolio-item graphic-design">
<!--07 insert class portfolio-bg to img tag all-->
<img class="portfolio-bg" src="img/graphic-bg.jpg" alt="Graphic
Design">
<div class="portfolio-description">
<h4>Graphic Design</h4>
<p>Lorem ipsum…</p>
</div>
</div> <!--end of graphic-design-->
<!--2. create portfolio web-design-->
- 50. Open in Browser : Firefox
พบปัญหาการใช้งาน ให้เพิ่มโค้ดเพื่อรองรับการทางานในเบราวเซอร์
- 52. Reference Easy CSS3 Animations
• http://tutsplus.com/
• https://www.udemy.com/
• http://www.w3schools.com/
• http://animateyourhtml5.appspot.com/pres/index.html?lang=en#1