This power point is introduce a simple CSS animation in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation

1. CSS
ANIMATION
Jaja

2. Why we need animation?

3. Boring Interestin
g
http://www.uisdc.com/login-screen-design-flow

4. More surprise

5. We should
know the
basic syntax
• CSS3 2DTransforms
• CSS3 3DTransforms

6. CSS3 2D
Transforms
CSS3 transforms allow you to translate, rotate, scale, and
skew elements
http://www.w3schools.com/css

7. CSS3 3D Transforms ?

8. Just add Z -axis
http://www.w3schools.com/css

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

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

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

12. Now?

13. http://tinyurl.com/oheqrzw

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

15. Two way
make your
animation
• CSS3Transitions
• CSS3 Animations

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

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

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

19. Let’s
compare
CSS3 AnimationsCSS3 Transitions
http://tinyurl.com/oa4md7e http://tinyurl.com/pdhdbsj

20. Just choose one of your love
http://tinyurl.com/p35wuvx http://tinyurl.com/qhkmbr3 http://tinyurl.com/nhkkxa4

21. Of course you can use framework
http://tinyurl.com/ppx9cf8

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

23. Let’s join the animation of world
http://tinyurl.com/pwfmyuy