Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×