Firstly hi,

This is my first post on dev.to :)

Before, i usually used jquery to make animation for web apps. But with the innovations coming with CSS3, I can say that I am not even looking at the face of the jQuery library about animations anymore.

Today i will show you what you can do with keyfreames.
I will not tell magical things :)

With the @keyframes feature, we can make various animations only with CSS without using any plugins. Shift, change color, growth, shrinkage etc. to any DOM element. We can apply effects. In short, we set a certain time interval with @keyframes and we can apply everything that can be done with CSS in this time interval to our item.

Browser Support

I want to talk about browser support before I begin my narration. All versions of Google Chrome, Mozilla, Opera and Safari support this feature. It is for more detailed table than here.

Usage

It's really simple

@keyframes animation-name{
    from { css attributes }
    to { css attributes }
}

You can type any variable name that describes your animation in the place that says "animation-name". The "from" part refers to our starting values, the "to" part refers to our end values. Also, we can use it by expressing it in percentiles. Expressing in percentiles in general enables us to establish a more flexible structure.

Features

There are a few values that the selector we will apply animation to. These values are;

Example

.box{
    width:25px;
    height:25px;
    background-color:blue;
    animation-name:animasyon-ismi;
    animation-duration:2s;
}

@keyframes animation-name{
10% { 
    width:100px;
    height:100px;
    background-color:red;
 }
50% {
    width:150px;
    height:150px;
    background-color:purple;
 }
100% { 
    width:50px;
    height:50px;
    background-color:yellow;
 } 
}

I have divided our animation into 3 parts above. If you want, you can divide it into 100 equal parts :) 10%, 25%, 50%, 75%, 100%… You can see my application by clicking here.