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 extended theory go to MDN’s docs, for practice go to the first task! 🚀

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; }