CSS animations make it possible to animate transitions from one CSS style configuration to another.
To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties.
This will lets you configure the timing, duration, and other details of how the animation sequence should progress.
Animation-names specifies the name of the @keyframes at-rule describing the animation’s keyframes.
Animation-duration configures the length of time that an animation should take to complete one cycle.
Animation-timing-function configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
Animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
The CSS -webkit-animation property is a shorthand property for setting WebKit multiple animation properties in one place. To create an animation using WebKit, use the -webkit-animation in conjunction with the @-webkit-keyframes keyword/at-rule, which allows you to define visual effects for your animation.
Although the -webkit-animation property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.
Top comments (0)