Workshop Advance CSS3 animation

Workshop : Advance Animating with CSS3
IT106 Multimedia Technology (STEP by STEP ) By Lecturer Nongkran Khomwichai

Transition-primer
การเปลี่ยนแปลงทิศทาง-ไพรเมอร์ : ด้วย property transition : transform
ในตัวอย่างนี้สร้างกล่องด้วยเลย์เยอร์ div ที่มีความกว้าง 200 px และสูง 200 px พื้นหลังสีแดง

<!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;
}

.animate-this {
height: 200px;
width: 200px;
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);
}

3D-Transform
การเปลี่ยนแปลงวัตถุกับการหมุนด้วย property transform : rotate(deg)
ในตัวอย่างนี้สร้างกล่องด้วยเลย์เยอร์ div ที่มีความกว้าง 100px และสูง 100px พื้นหลังสีแดง

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>

3D-Transform.css
.animate {
text-align: center;
height: 100px;
width: 100px;
margin: 10px;
float: left;
/*Support Web Browser*/
-moz-transition: -moz-transform 0.5s ease;
-o-transition: -o-transform 0.5s ease;
}

3D-Transform.css
/*2*/
body {
font-family: Helvetica, Tahoma, Arial, sans-serif;
color: #fff;
}
/*3 rotate*/
.rotate:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

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);
}

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);
}

Animation-primer
แอนนิเมชัน-ไพรเมอร์ ด้วยการทางาน property animation
CSS3 สามารถสร้าง Animation ขึ้นมาเองได้ กฎการใช้ของ CSS3 @keyframes ในการสร้าง Animation
ขึ้นมาใน CSS3 นั้น ต้องทราบกฎการใช้ก่อน ซึ่งก็คือ เมื่อไหร่ที่สร้างภาพเคลื่อนไหวขึ้นมา ต้องทาการระบุรูปแบบ
ของ CSS ภายในกฎของ @keyframes แล้ว Animation ที่สร้างขึ้นมาจะค่อย ๆ เปลี่ยนจากรูปแบบปัจจุบันไปเป็น
รูปแบบที่กาหนดได้ และในตัวอย่างนี้ใช้คาสั่ง infinite alternate

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

Animation-primer.html
<!DOCTYPE html>
<html>
<head>
<title>Animation Primer</title>
<link rel="stylesheet" href="animation-primer.css">
</head>
<body>
<div class="animate-this"></div>
</body>
</html>

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;*/

Animation-primer.css
@keyframes left-to-right {
from { left: 0px; }
to { left: 400px; }
}
@-moz-keyframes left-to-right {
from { left: 0px; }
to { left: 400px; }
}
@-webkit-keyframes left-to-right {
from { left: 0px; }
to { left: 400px; }
}

Keyframes.html
การสร้าง animation ด้วย Keyframes

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;*/

Keyframes.css
@-webkit-keyframes left-to-right {
0% { left: 0px; top: 0px; }
50% { top: 200px; }
100% { left: 600px; top: 0px; }
}
@keyframes left-to-right {
0% { left: 0px; top: 0px; }
50% { top: 200px; }
100% { left: 600px; top: 0px; }
}

Portfolio Animation
graphic-bg.jpg video-bg.jpgweb-bg.jgp

Portfolio-Animation.html
<body>

<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>
</div>
</body>

</div>

<div class="portfolio-item web-design">
<img src="img/web-bg.jpg" alt="Web Design">
<h4>Web Design</h4>
adipisicing elit. Tempora maiores explicabo suscipit quas rem
necessitatibus!</p>
</div>
</div>

<div class="portfolio-item video">
<img src="img/video-bg.jpg" alt="Video">
<h4>Video</h4>
adipisicing elit. Tempora maiores explicabo suscipit quas rem necessitatibus!</p>
</div>
</div>
</div>
</body>
</html>

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;
}

/*คลาสรายการ portfolio ประกอบด้วย Graphic Design, Web Design , Video*/
/*4*/
.portfolio-item {
width: 300px;
height: 400px;
float: left;
margin-top: 60px;
position: relative;
}

/*5*/
.portfolio-description {
background-color: #f0ede7;
color: #8b7d5e;
font-size: 20px;
width: 190px;
padding: 20px;
position: absolute;
top: 220px;
left: 35px;
box-shadow: 0px 0px 10px #000;
}
/*กาหนดคาอธิบาย portfolio จัดวางตาแหน่งบน
วัตถุภาพก่อนหน้าด้วย absolute และแต่งกล่อง
ข้อความมีเงาด้วย box-shadow*/

position: absolute;
position: relative;

Positionตาแหน่งที่ใช้กาหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ ทั้ง relative absolute และ
fixed กาหนดตาแหน่งด้วยการใช้ property left, top, right และ bottom
static การจัดวางตามปกติที่เป็น default
relative การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกาหนดขึ้นมาก่อนจะอยู่ด้านล่าง
และวัตถุที่กาหนดทีหลังจะอยู่ด้านบน และจะกาหนดตาแหน่งโดยนับจากจุดที่วัตถุนั้นๆอยู่
absolute การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกาหนดขึ้นมาก่อนจะอยู่ด้านล่าง
และวัตถุที่กาหนดทีหลังจะอยู่ด้านบน และ่่จะกาหนดตาแหน่งจากขอบของ container ที่บรรจุ วัตถุ
นั้นๆ
fixed การจัดวางที่กาหนดตาแหน่งจากขอบของ Window นั้นๆ
* ต้องกาหนดตาแหน่งทั้งในแนวตั้ง และแนวนอน
* ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ในตาแหน่งที่กาหนด (IE7)

/*6*/
h4 {
color: #f2af1d;
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
/*แต่หัวข้อ portfolio ให้เป็นสีเหลืองที่สวยขึ้น
พร้อมจัดข้อความอยู่ตาแหน่งกลางให้สวยงาม*/

<div class="portfolio">
<div class="portfolio-item graphic-design">

<img class="portfolio-bg" src="img/graphic-bg.jpg" alt="Graphic
Design">
<h4>Graphic Design</h4>
<p>Lorem ipsum…</p>
</div>
</div>

.portfolio-item {
width: 300px;
height: 400px;
float: left;
margin-top: 60px;
position: relative;
}
/*สร้างคลาส portfolio-bg ต่อจาก portfolio-item เพื่อทาการหมุนไปแนวแกน Y*/
/*07*/
.portfolio-bg {
}

...
position: absolute;
top: 220px;
left: 35px;
/*08*//*insert transform : rotateY; */
}

.portfolio-bg {transform: rotateY(30deg);}

.portfolio-item {
width: 300px;
height: 400px;
float: left;
margin-top: 60px;
position: relative;
-webkit-perspective: 500;} /* 09 *//*insert perspective*/
.portfolio-bg {
}

...
position: absolute;
top: 220px;
left: 35px;
/*10 increase transform : rotateY translateZ(60px); */
-webkit-transform: rotateY(30deg) translateZ(60px);
}

perspective
translateZ(60deg);

.portfolio-bg {
/*11 insert transition to class portfolio-bg*/
}
/*12 Create Class portfolio-item:hover for Class portfolio-bg only*/
.portfolio-item:hover .portfolio-bg {
}

.portfolio-item:hover .portfolio-bg { transform: rotateY(0deg); }

.portfolio-description{
….
/*13*//*insert transition: transform*/
}

/*14*//*Create Class portfolio-item:hover for Class portfolio-
description only*/
.portfolio-item:hover .portfolio-description {
}

.portfolio-description{
….
/*15*//*insert transition : transform*/
}

.portfolio-item:hover .portfolio-description {
/*16*//*insert transform : rotate(360deg)*/
transform: rotateY(360deg);
}

Open in Browser : Google Chrome
Google Chrome ทางานได้อย่างสมูท สวยงาม

Open in Browser : Firefox
พบปัญหาการใช้งาน ให้เพิ่มโค้ดเพื่อรองรับการทางานในเบราวเซอร์

http://animateyourhtml5.appspot.com/pres/index.
html?lang=en#1

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

Workshop Advance CSS3 animation

Recommended

Recommended

More Related Content

Similar to Workshop Advance CSS3 animation

Similar to Workshop Advance CSS3 animation (20)

Workshop Advance CSS3 animation