Bring me to life: An introduction to CSS animations

Melissa Balsante

Transcript

1. Bring me to life An introduction to CSS animations
3. When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. [Introduction to the CSS basic box model | MDN] CSS box model
5. The transform CSS property lets you rotate, scale, skew, or translate a given element. This is achieved by modifying the coordinate space of the CSS visual formatting model. [Transform | MDN] Transform
6. Transform functions • matrix( <number> [, <number> ]{5,5} ) • translate( <length/percentage> [, <length/percentage> ]? ) • translateX( <length/percentage> ) • translateY( <length/percentage> ) • scale( <number> [, <number> ]? ) • scaleX( <number> ) • scaleY( <number> ) • rotate( <angle> ) • skew( <angle> [, <angle> ]? ) • skewX( <angle> ) • skewY( <angle> ) • matrix3d( <number> [, <number> ]{15,15} ) • translate3d( <length/percentage> , <length/percentage> , <length> ) • translateZ( <length> ) • scale3d( <number> , <number> , <number> ) • scaleZ( <number> ) • rotate3d( <number> , <number> , <number> , <angle> ) • rotateX( <angle> ) • rotateY( <angle> ) • rotateZ( <angle> ) • perspective( <length> )
9. Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript. The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. [Transition | MDN] Transitions
10. Syntax • Property name: width, margin-top • Duration: 3s, 2s • Timing function: ease-in-out • Delay: 1s transition: width 3s ease-in-out 1s, margin-top 2s;
12. CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes. [CSS Animations | MDN] Animations
13. Options • animation-delay: Ns, Nms • animation-direction: normal, reverse, alternate, alternate-reverse • animation-duration: Ns, Nms • animation-fill-mode: none, forwards, backwards, both • animation-iteration-count: N, infinite • animation-name: <@keyframes function name> • animation-play-state: running, paused • animation-timing-function: linear, ease*, steps, frames( <number> ), cubic-bezier( <number>, <number>, <number>, <number> )
14. The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.This gives more control over the intermediate steps of the animation sequence than transitions. [@keyframes | MDN] Keyframes
15. Syntax @keyframes change-width { from { width: 100px; } 50% { width: 140px; } to { width: 120px; } }