What is CSS Animation, How to Use It?

Although we cannot say that there is 100% support for all browsers, it is possible to say that most of them support it. You can see whether the browser and version you are using supports the CSS 3 Animation feature by clicking the link https://www.caniuse.com/#search=animation.

If you have been interested in Flash before, you can quickly grasp the CSS 3 Animation feature. Now let's examine how the CSS 3 Animation feature is used and its parameters.

Basically, the animation is created as in the code block below.

@keyframes animasyon_adi {
  keyframe {
    property : value;
  }
}

@keyframes: When defining animation, we start with @keyframes definition.

animasyon_adı: Here we define the name of the animation. When we want to use the animation we will create on any element, we will use this name.

keyframe: Here we specify the start and end points, more precisely what the animation will do in which frame.

property, value: Here we define the properties and values of the animation.

Let's examine these parameters with an example below;

@keyframes ornek-animasyon {
  0% {
    opacity: 0;
  }
  100% {
    background-color: red;
    opacity: 1;
  }
}

We created an animation called ornek-animation. At the beginning of the animation, i.e. 0%, we defined the transparency value as 0. At the end of the animation, i.e. 100%, we defined the transparency value as 1 and the background colour as red. You can also use the same structure as from - to in 0% - 100%. You can see how to use it below.

@keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}

You can also create different animations in different steps by adding different % slices in between. For example, 25%, 50%, 64%, 78%, etc.

@keyframes Definition for Different Browsers

In the first place, we mentioned the incompatibility of the animation feature for different browsers. To avoid this, we can use different browser definitions as follows.

/* Firefox */
@-moz-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}
/* Safari & Chrome */
@-webkit-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}
/* Opera */
@-o-keyframes ornek-animasyon {
  from {
    opacity: 0;
  }
  to {
    background-color: red;
    opacity: 1;
  }
}

In this way, we have defined @keyframes for different browsers. In this way, we have only created the animation, we have not used it anywhere at the moment, let's examine how to use it now.

Animation Features and Usage

There are multiple features such as duration, delay time, animation repetition in the animation feature.

animation-name: The name of the animation we want to use. We write the ornek-animation value that we defined above as @keyframes ornek-animation here.

animation-duration: Duration of the animation. For example, 1s (1 second), 750ms (750 milliseconds), etc.

animation-timing-function: The speed of animation.

animation-delay: Delay time. For example, if we specify 2s, the animation will start with a delay of 2 seconds.

animation-iteration-count: Number of animation repetitions. When we specify 3, the animation will run 3 times.

animation-direction: Direction of the animation. By default, the animation will run from beginning to end. For example, if we want it to run from the end to the beginning, we can use the alternate value.

animation-fill-mode: The process after the animation ends. For example, when we give the backwards parameter, at the end of the animation, the properties in the first frame of the animation are applied.

Let's make an example.

.css-animation-ornegi {
    animation-name: ornek-animasyon;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-fill-mode: none;
}

If we are going to use animation in more than one place, writing these properties one by one will cause unnecessary code clutter. For this, it will be more useful to use the short definition.

.css-animation-ornegi {
    animation: ornek-animasyon 2s ease 0s 3 normal none;
}

The point to be considered here is the order of the parameters. The values we give should be in the same order as the parameters in the first example. So 1st parameter animation-name, 2nd parameter animation-duration, 3rd parameter animation-timing-function etc..