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;

}

Transition-primer

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

}

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

}

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 animationCSS3 สามารถสราง 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

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

http://www.w3schools.com/cssref/css3_pr_animation.asp

http://www.w3schools.com/cssref/css3_pr_animation-name.asp

http://www.w3schools.com/cssref/css3_pr_animation-duration.asp

http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

http://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

http://www.w3schools.com/cssref/css3_pr_animation-direction.asp

http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

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>

Portfolio-Animation.html</div>

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

Portfolio-Animation.html

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

</body></html>

Portfolio-Animation.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;

}

Portfolio-Animation.html page

Portfolio-Animation.css/*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 ใหเปนสเหลองทสวยขน พรอมจดขอความอยต าแหนงกลางใหสวยงาม*/


Portfolio-Animation.html

<div class="portfolio"><div class="portfolio-item graphic-design"><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> 



Portfolio-Animation.css.portfolio-item {

width: 300px;height: 400px;float: left;margin-top: 60px;position: relative;

}

/*สรางคลาส portfolio-bg ตอจาก portfolio-item เพอท าการหมนไปแนวแกน Y*//*07*/.portfolio-bg {

-webkit-transform: rotateY(30deg);}


.portfolio-description {...position: absolute;top: 220px;left: 35px;box-shadow: 0px 0px 10px #000;/*08*//*insert transform : rotateY; */-webkit-transform: rotateY(30deg);

}


.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 {-webkit-transform: rotateY(30deg);

}


.portfolio-description {...position: absolute;top: 220px;left: 35px;box-shadow: 0px 0px 10px #000;/*10 increase transform : rotateY translateZ(60px); */-webkit-transform: rotateY(30deg) translateZ(60px);

}

Portfolio-Animation.htmlperspective

translateZ(60deg);


.portfolio-bg {-webkit-transform: rotateY(30deg);/*11 insert transition to class portfolio-bg*/-webkit-transition: -webkit-transform 0.5s ease;

}

/*12 Create Class portfolio-item:hover for Class portfolio-bg only*/.portfolio-item:hover .portfolio-bg {

-webkit-transform: rotateY(0deg);}

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


.portfolio-description{….box-shadow: 0px 0px 10px #000;-webkit-transform: rotateY(30deg) translateZ(60px); /*13*//*insert transition: transform*/-webkit-transition: -webkit-transform 0.5s ease;

}


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

-webkit-transform: rotateY(0deg) translateZ(0px);}



.portfolio-description{….box-shadow: 0px 0px 10px #000;-webkit-transform: rotateY(30deg) translateZ(60px); -webkit-transition: -webkit-transform 0.5s ease;/*15*//*insert transition : transform*/transition: transform 0.5s ease;

}


.portfolio-item:hover .portfolio-description { -webkit-transform: rotateY(0deg) translateZ(0px);/*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

http://tutsplus.com/

https://www.udemy.com/

http://www.w3schools.com/

Education

Workshop Advance CSS3 animation