CSS ANIMATION

Jaja

Why we need animation?

Boring Interesting

http://www.uisdc.com/login-screen-design-flow

More surprise

We should know the

basic syntax

• CSS3 2D Transforms

• CSS3 3D Transforms

CSS3 2D Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements

http://www.w3schools.com/css

CSS3 3D Transforms ?

Just add Z -axishttp://www.w3schools.com/css

It’s easy to compare 2D and 3Dhttp://tinyurl.com/obdrnq2

Example

translate

div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari */ transform: translate(50px,100px); /* Standard syntax */}(0,0)

http://www.w3schools.com/css

Example

rotate

div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black;}

div#myDiv { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); /* Standard syntax */}

http://www.w3schools.com/css

Now?

http://tinyurl.com/oheqrzw

A easy animation

example

• Just add “transition” in your CSS style

div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black;-webkit-transition: transform 1s; /* Safari */ transition: transform 1s; }div:hover{ -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari */ transform: translate(50px,100px); /* Standard syntax */}

http://www.w3schools.com/css

Two way make your animation

• CSS3 Transitions

• CSS3 Animations

CSS3 Transitions

To create a transition effect, you must specify two things:

• The CSS property you want to add an effect to

• The duration of the effect

-webkit-transition: transform 1s; /* Safari */ transition: transform 1s;

Previously example

http://www.w3schools.com/css

Effect propertyEffect duration

CSS3 Animations

• You specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times/* The animation code */@keyframes example { from {background-color: red;} to {background-color: yellow;}}

/* The element to apply the animation to */div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s;}

http://www.w3schools.com/css

You can specify

every frame

/* The animation code */@keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;}}

/* The element to apply the animation to */div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s;} http://www.w3schools.com/css

Let’s compare

CSS3 AnimationsCSS3 Transitions

http://tinyurl.com/oa4md7e http://tinyurl.com/pdhdbsj

Just choose one of your love

http://tinyurl.com/p35wuvx http://tinyurl.com/qhkmbr3 http://tinyurl.com/nhkkxa4

Of course you can use framework

http://tinyurl.com/ppx9cf8

Animate.css

https://daneden.github.io/animate.css/

Let’s join the animation of world

http://tinyurl.com/pwfmyuy