Hello, animation!

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.

Here is a sample description of the keyframes of an animation:

@keyframes stretching {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

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:

.button {
  animation-name: stretching;
  animation-duration: 1s;
}

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.