0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>CSS enables you to create complex animations and control them in a number of ways. A description of a CSS animation consists of two parts: a set of @keyframes and animation parameters.</p>
1
<p>CSS enables you to create complex animations and control them in a number of ways. A description of a CSS animation consists of two parts: a set of @keyframes and animation parameters.</p>
2
<p>Here is a sample description of the keyframes of an animation:</p>
2
<p>Here is a sample description of the keyframes of an animation:</p>
3
@keyframes stretching { 0% { width: 100px; } 100% { width: 200px; } }<p>The animation in this example is called stretching and describes how a block’s style will change from the initial to the final point. This animation can be applied to any element. All you need to do is to add two properties to your CSS: animation-name (name of your animation) and animation-duration (duration) and define the corresponding values. For example:</p>
3
@keyframes stretching { 0% { width: 100px; } 100% { width: 200px; } }<p>The animation in this example is called stretching and describes how a block’s style will change from the initial to the final point. This animation can be applied to any element. All you need to do is to add two properties to your CSS: animation-name (name of your animation) and animation-duration (duration) and define the corresponding values. For example:</p>
4
.button { animation-name: stretching; animation-duration: 1s; }<p>This code will assign the stretching animation to all elements of the button class. As a result, the element will be gradually stretched horizontally from 100px to 200px in 1s.</p>
4
.button { animation-name: stretching; animation-duration: 1s; }<p>This code will assign the stretching animation to all elements of the button class. As a result, the element will be gradually stretched horizontally from 100px to 200px in 1s.</p>