Hello, animation!

Welcome to our CSS Animation course curious CSS explorer! We will walk the evolution path of a civilization and conquer deep space. We will move, rotate and transform objects while learning the basics of object animation in CSS. For practice in animations go to the first task, for other free interactive courses in HTML, CSS, and JavaScript go to htmlacademy.org! 🚀

CSS enables you to 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.