Page 48 - CSS

Cross-browser compatibility

For older WebKit-based browsers, you'll need to use the vendor prefix on both the @keyframes
declaration and the animation property, like so:

@-webkit-keyframes{}

-webkit-animation: ...

Syntax Examples

Our first syntax example shows the animation shorthand property using all of the available
properties/parameters:

animation: 3s ease-in 1s 2 reverse both
paused slidein;
/* duration | timing-function | delay | iteration-count | direction | fill-mode |
play-state | name */

Our second example is a little more simple, and shows that some properties can be omitted:

animation: 3s linear 1s slidein;
/* duration | timing-function | delay | name */

Our third example shows the most minimal declaration. Note that the animation-name and
animation-duration must be declared:

animation: 3s slidein;
/* duration | name */

It's also worth mentioning that when using the animation shorthand the order of the properties
makes a difference. Obviously the browser may confuse your duration with your delay.

If brevity isn't your thing, you can also skip the shorthand property and write out each property
individually:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;

Read Animations online: https://riptutorial.com/css/topic/590/animations

https://riptutorial.com/ 26