The CSS animation property is usually used to animate CSS properties with distinct values. In other words, it can gradually change from one style to another. Animation property is one of the CSS3 properties.
Note: The animation property will not work if the tag contains the following values as display: none ; visibility: hidden ; height: auto ;
- The CSS animation property can be applied to the following things:
The @keyframes at-rule:
If you want to apply the animation, then you have to specify what should happen at the specific moments during the animation. You can easily be defined this with the help of @keyframes at-rule.
During the animation, you can change the set of CSS styles many times. 0% is the beginning of the animation, 100% is the end of the animation.
Example of animation with the @keyframes at-rule:
In the following code, we bind the animation inside the tag. It will gradually change the color of the element. By executing the above code, you can get the animated result as shown in the below image. The animation-related properties are used to set all the animation properties with a single declaration. Let’s see the list of animation-related properties below. It defines the name of the @keyframes-rule that you want to apply. In this code, we have applied the animation property with animation-name. This is the output of the above code. This property plays a major role in animation. Because it defines the length of the time that animation will take to complete one cycle. If it is not specified, then the animation will not work. In the below example code, we use the animation-duration property. Let’s see how it works. By running the above code, you will get the animated output as shown in the below image. This property will define how the animation will progress over the duration of each cycle. The following code shows the animation-timing-function property with the linear value. This is the output of the above code. The Animation-delay property will set the time between the element being loaded and the start of the animation. The following code sets the animation delay to 3 seconds. Thus, the animation starts after 3 seconds. The following image has shown the output of the above code. This property defines whether the animation should play in reverse order on alternate cycles or not.
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 4s infinite;
}
@keyframes pulse {
0% {
background-color: #1082CA;
}
50% {
background-color: #010ED0;
}
100% {
background-color: #4B0083;
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property.</div>
</body>
</html>
Result:
Animation-related Properties:
@keyframes pulse {
/* declare animation actions here */
}
.element {
animation-name: pulse;
animation-duration: 3.5s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
.element {
animation: pulse 3.5s ease-in 1s alternate infinite none running;
}
Animation-name property:
animation-name: keyframe-name | none | initial | inherit
Example of the Animation-name Property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #8FFF8A;
}
50% {
background-color: #52FF2D;
}
100% {
background-color: #B0FF00;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>
Result:
Animation-duration:
animation-duration: time | initial | inherit
Example of the Animation-duration Property:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #7EE8FA;
}
50% {
background-color: #EEC0C6;
}
100% {
background-color: #9FA4C4
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>
Result:
Animation-timing-function:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
Example of the Animation-timing-function Property with linear Value:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #06006A;
position: relative;
-webkit-animation: element 5s infinite;
-webkit-animation-timing-function: linear;
animation: element 5s infinite;
animation-timing-function: ease;
}
@-webkit-keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>
Result:
Animation-delay
animation-delay: time | initial | inherit
Example of the Animation-delay Property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #00B69E;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>
Result:
Animation-direction Property:
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
Example of the Animation-direction property:
Here, we will show you the code using animation-direction with the normal value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards.</p>
<div></div>
</body>
</html>
Result:
By executing the above code, you can get the output as shown in the below image.
Animation-iteration-count Property:
Using this property, you can set the number of times an animation cycle should be played before stopping. Its default value is 1 , and also you can set any positive values.
Note : If you give zero or any negative value, then the animation will not play.
animation-iteration-count: number | infinite | initial | inherit
Example of Animation-iteration-count Property:
In the following code, we set two elements with two different animation-iteration-counts. The iteration count of the first element is 3 , and the second element is 2.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #B279A7;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #6B0F1A;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>
Result:
After executing the above code, you will see the output as shown in the below image.
Animation-fill-mode Property:
The animation-fill-mode property is used to specify a style for the element applied before or after the animation is executed.
animation-fill-mode: none | forwards | backwards | both | initial | inherit
- This property will allow the following values.
- forwards – This value specifies that the element should keep the style values set by the last keyframe.
- backwards – It specifies that the element should keep the style values set by the first keyframe.
- both – It can specify that the animation should follow the rules for both forward and backward.
- none – It is a default value. This value specifies that no style will be applied to the element before or after the animation is executed.
Example of Animation-fill-mode Property with the “backwards” value:
In the below code, we use animation-fill-mode property with the backwards value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #90D5EC;
position: relative;
-webkit-animation: element 5s;
-webkit-animation-fill-mode: forwards;
animation: element 5s;
animation-fill-mode: backwards;
}
@-webkit-keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: blue;
}
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #FC575E;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>
Result:
By running the above code, we will get the output as shown in the below image.
Animation-play-state:
This property will specify whether the animation is played or paused. The default value of this property is “ running “.
animation-play-state: paused | running | initial | inherit
Example of the Animation-Play-State property:
The below code uses the animation-play-state property with the running value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #9E8FB2;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>
Result:
After executing the above code, you will get the result ash shown in the below image.
Multiple Animations:
You can declare multiple animations on a selector, to do this, you need to separate the values with commas.
Example of multiple animations on a selector:
The below code is the example of multiple animations on a selector.
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%,
100% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>
Result:
The above code gives the result as shown in the below image.
Browser Support:
The post CSS animation Property appeared first on Share Point Anchor.
Top comments (0)