CSS Animations & Transitions

CSS Animations & Transitions

• 1.
  CSS Animations & Transitions RefreshHilo 2/10/15
• 2.
  What’s going tobe covered ● What are Transitions & Animations ● Pros and Cons ● Performance
• 3.
  Transitions div { color:black; transition: color1s linear 500ms; transition-property: color; transition-duration: 1s; transition-timing-function: linear; transition-delay: 500ms; } div:hover {color:red;}
• 4.
  Transitions ● Transition property- what will change ● Transition duration - animation time ● Transition timing function - animation speed curve ● Transition delay - time before animation Must have a property and duration set for transition animations to work!
• 5.
  Transitions Changes transition propertyfrom one state to another. ● Set animation in current state, modify state with pseudo classes (:hover,:focus) or classes (.active) ● Multiple properties can be animated ● Animation properties can be changed (Javascript & :pseudo) ● JS listeners on transition end: ‘transitionend’ ● Properties List ● Demo
• 6.
  Questions?
• 7.
  Animations div { animation:GoAnimate 2s;} @keyframes GoAnimate { from { color: black;} to { color: red;} }
• 8.
  Animations div { animation-name: GoAnimate; animation-duration:1s; animation-timing-function: linear; animation-delay: 500ms; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-fill-mode: forward; } @keyframes GoAnimate { 0% { color: black;} 25% {color:pink;} 50% {color:orange;} 75% {color:blue;} 100% { color: red;} }
• 9.
  Animations ● Animation name- name of defined animation ● Animation duration, timing function, delay same as transition ● Animation iteration count - how many times it will loop ● Animation direction - direction and alternate cycles ● Animation play state - running or paused (can toggle) ● Animation fill mode - sets end state after animation Must have a name and duration set for animations to work!
• 10.
  Animations ● Once ananimation is applied it can’t be changed, only paused (animation-play-state) - can be changed with JS, but resets the animation ● JS listeners on start, iteration, end of animation (not paused) - event object is useful, ‘elapsedTime’ o ‘animationstart’, ‘animationiteration’, ‘animationend’ ● Don’t forget animation-fill-mode ● Properties List ● Demo Swing, Demo Play State
• 11.
  Questions?
• 12.
  Pros & Cons TransitionsPros ● Good for :pseudo-classes (:hover,:active) ● Does not require JS ● Reversible - easy state change ● Easy to use Transitions Cons ● Simple only ● Browser prefixes (-webkit) ● Sometimes requires JS assistance - change the height of something Animations Pros ● Complex Animations with multiple keyframes (0%, 1%, 5%) ● JS listeners ● Defined Animations - modular Animations Cons ● Can’t change without JS - no easy reverse ● Browser prefixes ● Complex interactions require JS
• 13.
  Performance How do youmeasure performance? Chrome dev tools > timeline Record Animation and review results. Goal > 30fps - target is around 60fps
• 14.
  Performance CPU vs GPUAnimation: Most animation use the CPU, animations that use transforms (sometimes) use the GPU. ● Use transform:translate() vs TRBL o TRBL uses whole pixels - requires more paint time o transform:translate uses subpixels and tweens animation smoother - no stair stepping ● Low cost animations = position(transform), rotation, scale, opacity
• 15.
  Performance TRBL transform:translate Scripting =JS events, functions, etc Rendering = layout Painting = pixels on screen Idle = sipping Mai-Tai’s
• 16.
  Questions? Edward Meehan -Refresh Hilo 2015