CSS — анимация: шестеренки
CSS-анимация крутящихся шестеренок
HTML
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Анимация SVGPNG.RU</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class = "cont"> <div class = "circles" id = "no1"> </div> <div class = "circles" id = "no2"> </div> <div class = "circles" id = "no3"> </div> </div> </div> </body> </html>
CSS
CSS
.cont{
height: 100px;
width: 100px;
position: absolute;
}
.circles{
height: 80px;
width: 80px;
background: url("circle.svg");
background-size: cover;
position: absolute;
left: 7px;
top: 27px;
overflow:hidden;
}
#no1{
left:-25px;
top:0px;
animation-name: crcA1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#no2{
left:45px;
top:-25px;
animation-name: crcA2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#no3{
left:55px;
top:50px;
animation-name: crcA1;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes crcA1 {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes crcA2 {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
Изображения
