O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Css animation

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

  • Entre para ver os comentários

Css animation

  1. 1. CSS ANIMATION Jaja
  2. 2. Why we need animation?
  3. 3. Boring Interestin g http://www.uisdc.com/login-screen-design-flow
  4. 4. More surprise
  5. 5. We should know the basic syntax • CSS3 2DTransforms • CSS3 3DTransforms
  6. 6. CSS3 2D Transforms CSS3 transforms allow you to translate, rotate, scale, and skew elements http://www.w3schools.com/css
  7. 7. CSS3 3D Transforms ?
  8. 8. Just add Z -axis http://www.w3schools.com/css
  9. 9. It’s easy to compare 2D and 3D http://tinyurl.com/obdrnq2
  10. 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. 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. 12. Now?
  13. 13. http://tinyurl.com/oheqrzw
  14. 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. 15. Two way make your animation • CSS3Transitions • CSS3 Animations
  16. 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. 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. 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. 19. Let’s compare CSS3 AnimationsCSS3 Transitions http://tinyurl.com/oa4md7e http://tinyurl.com/pdhdbsj
  20. 20. Just choose one of your love http://tinyurl.com/p35wuvx http://tinyurl.com/qhkmbr3 http://tinyurl.com/nhkkxa4
  21. 21. Of course you can use framework http://tinyurl.com/ppx9cf8
  22. 22. Animate.css https://daneden.github.io/animate.css/
  23. 23. Let’s join the animation of world http://tinyurl.com/pwfmyuy

×