Page 44 - CSS

Chapter 4: Animations

Syntax

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Parameters

Transition

Parameter Details

Either the CSS property to transition on, or all, which specifies all
property
transition-able properties.

duration Transition time, either in seconds or milliseconds.

Specifies a function to define how intermediate values for properties are
timing-function computed. Common values are ease, linear, and step-end. Check out the
easing function cheat-sheet for more.

Amount of time, in seconds or milliseconds, to wait before playing the
delay
animation.

@keyframes

You can either specify a set time with a percentage value, or two
[ from | to |
percentage values, ie 10%, 20%, for a period of time where the keyframe's
<percentage> ]
set attributes are set.

block Any amount of CSS attributes for the keyframe.

Examples

Animations with the transition property

Useful for simple animations, the CSS transition property allows number-based CSS properties to
animate between states.

https://riptutorial.com/ 22