Using CSS animations
CSS animations animate transitions from one CSS style to another. Animations have two components, a style CSS animation and a set of keyframes that show the start and end states of the animations, as well as possible situated between waypoints. There square measure 3 key blessings to CSS animations over ancient script-driven animation techniques:
1. They’re straightforward to use for easy animations; you'll be able to produce them while not even having to grasp JavaScript.
2. The animations run well, even beneath moderate system load. easy animations will typically perform poorly in JavaScript. The rendering engine will use frame-skipping and alternative techniques to stay the performance as sleek as potential.
3. Letting the browser manage the animation sequence lets the browser optimize performance and potency by, for instance, reducing the update frequency of animations running in tabs that are not presently visible.
Configuring the animation
To create a CSS animation sequence, you vogue the part you wish to animate with the animation property or its sub-properties. This allows you to piece the temporal arrangement, duration, and alternative details of however the animation sequence ought to progress. This does not configure the particular look of the animation, that is finished victimization the @keyframes at-rule as represented in Defining the animation sequence victimization keyframes below.
The sub-properties of the animation property are:
animation-name
Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
animation-duration
Configures the length of your time that associate animation ought to fancy complete one cycle.
animation-timing-function
Configures the temporal arrangement of the animation; that's, however the animation transitions through keyframes, by establishing acceleration curves.
animation-delay
Configures the delay between the time the part is loaded and also the starting of the animation sequence.
animation-iteration-count
Configures the number of times the animation ought to repeat; you'll be able to specify infinite to repeat the animation indefinitely.
animation-direction
Configures whether the animation to alternate direction on every run through the sequence or reset to the beginning purpose and repeat itself.
animation-fill-mode
Configures what values square measure applied by the animation before and when it's execution.
animation-play-state
pause and resume the animation sequence.
Defining the animation sequence victimization keyframes
Once you’ve designed the animation’s temporal arrangement, you wish to outline the looks of the animation. this can be done by establishing 2 or a lot of keyframes victimization the @keyframes at-rule. every keyframe describes however the animated part ought to render at a given time throughout the animation sequence.
Since the temporal arrangement of the animation is outlined within the CSS vogue that configures the animation, keyframes use a to point the time throughout the animation sequence at that they happen. third indicates the primary moment of the animation sequence, whereas 100% indicates the ultimate state of the animation. as a result of these double area unit therefore vital, they need special aliases: from and to. each area unit ex gratia. If from/0% or to/100% isn't fixed, the browser starts or finishes the animation victimization the computed values of all attributes.
Examples
1. The below example animation to the
element. The animation is for 4 seconds, and it will slowly change the background-color of the
element from "blue" to "green"
/* The animation code */
@keyframes example {
from {background-color: blue;}
to {background-color: green;}
}
p {
width: 100px;
height: 100px;
background-color: blue;
animation-name: example;
animation-duration: 4s;
}
2. The below example change the bg-color of the
element when the animation is 25%, 50% and 100% complete:
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
p {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}