@keyframes :

Animasyon kuralıdır. Animasyonun adımlarını girerek oluşturursunuz. Tıpkı çizgifilm animasyonlarının kare kare oluşturulması gibidir. Bu adımlar % yüzdelelerle ifade edilir. %0 ‘ dan 100% kadar adımları siz belirlersiniz. En iyi tarayıcı desteğini sağlamanız için %0 başlangıç değeri ve 100% bitiş değeri girilmelidir.

Örnek

.keyframes {
   width: 200px;
   height: 200px;
   background: red;
   position :relative;
   -webkit-animation: mymove 6s infinite; /* Chrome, Safari, Opera */ 
   animation: mymove 6s infinite;
   text-align: center;
   color: white;
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 200px;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 500px;}
    75%  {left: 50px}
    100% {left: 100px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer	Açıklama
animationname	Bu kısma bir animasyon ismi girilmelidir.
Keyframes-selector	%0-100% arası adımlar girilerek oluşturulur. %0 ve 100% değerlerinin girilmesi önerilir.
Css-style	Bir veya daha fazla değişecek css özelliği.

Tarayıcı Desteği

43.0 4.0-webkit	16.0 5.0-moz	10.0	9.0 4.0-webkit	30.0 15.0-webkit 12.0-o