Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS Animations &
Transitions
Refresh Hilo 2/10/15
What’s going to be covered
● What are Transitions & Animations
● Pros and Cons
● Performance
Transitions
div {
color:black;
transition: color 1s linear 500ms;
transition-property: color;
transition-duration: 1s;
tra...
Transitions
● Transition property - what will change
● Transition duration - animation time
● Transition timing function -...
Transitions
Changes transition property from one state to another.
● Set animation in current state, modify state with pse...
Questions?
Animations
div { animation: GoAnimate 2s;}
@keyframes GoAnimate {
from { color: black;}
to { color: red;}
}
Animations
div {
animation-name: GoAnimate;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 50...
Animations
● Animation name - name of defined animation
● Animation duration, timing function, delay same as
transition
● ...
Animations
● Once an animation is applied it can’t be changed, only
paused (animation-play-state) - can be changed with
JS...
Questions?
Pros & Cons
Transitions Pros
● Good for :pseudo-classes
(:hover,:active)
● Does not require JS
● Reversible - easy state c...
Performance
How do you measure performance?
Chrome dev tools > timeline
Record Animation and review results.
Goal > 30fps ...
Performance
CPU vs GPU Animation: Most animation use the CPU,
animations that use transforms (sometimes) use the GPU.
● Us...
Performance
TRBL transform:translate
Scripting = JS events, functions, etc
Rendering = layout
Painting = pixels on screen
...
Questions?
Edward Meehan - Refresh Hilo 2015
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

CSS Animations & Transitions

Download to read offline

What are CSS transitions and animations, some of the pros and cons, and also performance.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

CSS Animations & Transitions

  1. 1. CSS Animations & Transitions Refresh Hilo 2/10/15
  2. 2. What’s going to be covered ● What are Transitions & Animations ● Pros and Cons ● Performance
  3. 3. Transitions div { color:black; transition: color 1s linear 500ms; transition-property: color; transition-duration: 1s; transition-timing-function: linear; transition-delay: 500ms; } div:hover {color:red;}
  4. 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. 5. Transitions Changes transition property from 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. 6. Questions?
  7. 7. Animations div { animation: GoAnimate 2s;} @keyframes GoAnimate { from { color: black;} to { color: red;} }
  8. 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. 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. 10. Animations ● Once an animation 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. 11. Questions?
  12. 12. Pros & Cons Transitions Pros ● 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. 13. Performance How do you measure performance? Chrome dev tools > timeline Record Animation and review results. Goal > 30fps - target is around 60fps
  14. 14. Performance CPU vs GPU Animation: 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. 15. Performance TRBL transform:translate Scripting = JS events, functions, etc Rendering = layout Painting = pixels on screen Idle = sipping Mai-Tai’s
  16. 16. Questions? Edward Meehan - Refresh Hilo 2015
  • oualter

    May. 28, 2015
  • YoonSeulChoi

    Apr. 5, 2015

What are CSS transitions and animations, some of the pros and cons, and also performance.

Views

Total views

1,925

On Slideshare

0

From embeds

0

Number of embeds

147

Actions

Downloads

49

Shares

0

Comments

0

Likes

2

×