В отличие от свойств transform и transition правило @keyframes позволяет анимировать изображения без участия пользователя. Т.е. keyframes анимация происходит на странице сайта сама по себе, независимо от того делаем ли мы какие-то действия мышкой.
Синтаксис следующий:
Сначала для изображения задаём имя анимации, её длительность и цикл.
#fade img{
animation-name: fade;
animation-duration: 5s;
animation-iteration-count: infinite;
}
animation-name: fade;
animation-duration: 5s;
animation-iteration-count: infinite;
}
Затем описываем ключевые кадры с помощью правила @keyframes.
@keyframes fade {
0% {opacity: 0}
50%{opacity:1;}
100%{opacity:0;}
}
0% {opacity: 0}
50%{opacity:1;}
100%{opacity:0;}
}
Примеры keyframes анимации:
Исчезающая и появляющаяся картинка.
index.html
<div id="fade">
<img src="/images/img1.png" />
</div>
<img src="/images/img1.png" />
</div>
style.css
#fade img{
animation-name: fade;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes fade {
0% {opacity: 0}
50%{opacity:1;}
100%{opacity:0;}
}
animation-name: fade;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes fade {
0% {opacity: 0}
50%{opacity:1;}
100%{opacity:0;}
}
Квадрат превращается в круг.
index.html
<div id="square">
<img src="/images/square.jpg" />
</div>
<img src="/images/square.jpg" />
</div>
style.css
#square img{
animation-name: square;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes square {
0% {border-radius: 0px}
50%{border-radius: 100px}
100%{border-radius: 0px}
}
animation-name: square;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes square {
0% {border-radius: 0px}
50%{border-radius: 100px}
100%{border-radius: 0px}
}
Эффект бьющегося сердца.
index.html
<div id="heart">
<img src="/images/heart.png" />
</div>
<img src="/images/heart.png" />
</div>
style.css
#heart img{
animation-name: heart;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes heart {
0% {transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
50%{transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);}
100%{transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
}
animation-name: heart;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes heart {
0% {transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
50%{transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);}
100%{transform:scale(0.5);
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-o-transform:scale(0.5);}
}
Перекатывающийся шарик.
index.html
<div id="ball">
<img src="/images/ball.png" />
</div>
<img src="/images/ball.png" />
</div>
style.css
#ball img{
animation-name: ball;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes ball {
0% {margin-left: 0px}
50%{margin-left: 200px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);}
100%{margin-left: 0px}
}
animation-name: ball;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes ball {
0% {margin-left: 0px}
50%{margin-left: 200px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);}
100%{margin-left: 0px}
}
Стрелочный секундомер.
index.html
<div id="clock">
<img src="/images/clock.png" />
</div>
<img src="/images/clock.png" />
</div>
style.css
#clock {
position: relative;
}
#clock:before {
content: "";
display: inline-block;
position: absolute;
width: 2px;
height: 85px;
left: 100px;
top: 25px;
background: #000;
animation: clock 60s infinite steps(60);
transform-origin: 0 75px;
}
@keyframes clock {
100%{
transform: rotate(360deg);
}
}
position: relative;
}
#clock:before {
content: "";
display: inline-block;
position: absolute;
width: 2px;
height: 85px;
left: 100px;
top: 25px;
background: #000;
animation: clock 60s infinite steps(60);
transform-origin: 0 75px;
}
@keyframes clock {
100%{
transform: rotate(360deg);
}
}
Цифровой секундомер.
index.html
<div id="steps">
</div>
</div>
style.css
#steps {
width: 100px;
font-size: 50px;
color: #0018ff;
}
#steps:before,
#steps:after {
content: "0123456789";
display: inline-block;
width: 25px;
overflow: hidden;
animation: timing 10s infinite step-end;
}
#steps:before {
animation-duration: 100s;
}
@keyframes timing {
10%{
text-indent: -25px;
}
20%{
text-indent: -50px;
}
30%{
text-indent: -75px;
}
40%{
text-indent: -100px;
}
50%{
text-indent: -125px;
}
60%{
text-indent: -150px;
}
70%{
text-indent: -175px;
}
80%{
text-indent: -200px;
}
90%{
text-indent: -225px;
}
}
width: 100px;
font-size: 50px;
color: #0018ff;
}
#steps:before,
#steps:after {
content: "0123456789";
display: inline-block;
width: 25px;
overflow: hidden;
animation: timing 10s infinite step-end;
}
#steps:before {
animation-duration: 100s;
}
@keyframes timing {
10%{
text-indent: -25px;
}
20%{
text-indent: -50px;
}
30%{
text-indent: -75px;
}
40%{
text-indent: -100px;
}
50%{
text-indent: -125px;
}
60%{
text-indent: -150px;
}
70%{
text-indent: -175px;
}
80%{
text-indent: -200px;
}
90%{
text-indent: -225px;
}
}