Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 Animations & Transitions

CSS3 Animations & Transitions

A deck about CSS Animations and Transitions for the Web920 Meetup group.

Patrick Rauland

April 15, 2013
Tweet

More Decks by Patrick Rauland

Other Decks in Technology

Transcript

  1. Transitions • Any CSS change based on an element's state

    ◦ hover states ◦ adding a class via js • All CSS, no JS or Flash
  2. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; } • The list of properties to transition • ex. ◦ height ◦ opacity ◦ font-size ◦ all ◦ etc
  3. Transitions - Browser Support • Firefox • Webkit ◦ Safari

    ◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition
  4. Animations #my-element { animation: my-animation 5s; } @keyframes my-animation {

    0% {background: red;} 50% {background: blue;} 100% {background: green;} }
  5. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Name of animation
  6. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Duration • Ex. ◦ 5s ◦ 5000ms
  7. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Easing • Ex. ◦ linear ◦ ease-in ◦ ease-out ◦ ease-in-out
  8. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Delay
  9. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Count • Ex. ◦ 1 ◦ 2 ◦ 3 ◦ infinite
  10. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Direction of keyframes • Ex. ◦ normal ◦ alternate ◦ reverse
  11. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • On/off switch
  12. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • Name of animation
  13. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • Keyframe position • Unlimited keyframes • Alternate notation: ◦ to ◦ from
  14. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • CSS styles • Can be just about anything
  15. Animations - Browser Support • Firefox • Webkit ◦ Safari

    ◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition