Анимация вращения на CSS

Анимация вращения на CSS

Анимация вращение может пригодится для некоторых декоративных элементов на сайте, для баннеров и различных эффектов для привлечения внимания. В данном примере показана анимация вращения картинки, но так же это может быть и блок.

Пример

HTML


<div class="animation-bg">
  <img class="img-rotation" src="image.png"/>
</div>

CSS


.animation-bg{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #042548;
    height: 350px;
}
.img-rotation {
    width: 200px;
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotation;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotation;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: rotation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
@-webkit-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-moz-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@-o-keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
@keyframes rotation {
    0% {-webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);}
    100% {-webkit-transform:rotate(360deg);
        -moz-transform:rotate(720deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);}
}
By julia