CSS — анимация: шестеренки
CSS-анимация крутящихся шестеренок
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
.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);} }