CSS
.circle {
position: absolute;
border-radius: 50%;
width: 220px;
height: 220px;
overflow: hidden;
}
.circle div {
background: url("http://zverushka.bl.ee/circle-bg.jpg");
width: 331px;
height: 264px;
position: absolute;
top: -23px;
left: -23px;
-webkit-animation: circle-move 7s infinite linear;
-o-animation: circle-move 7s infinite linear;
-moz-animation: circle-move 7s infinite linear;
-ms-animation: circle-move 7s infinite linear;
animation: circle-move 7s infinite linear;
}
@-webkit-keyframes circle-move {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -10px, 0);
-moz-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
-o-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
-o-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-o-keyframes circle-move {
0% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(0, -10px, 0);
-moz-transform: translate3d(0, -10px, 0);
-ms-transform: translate3d(0, -10px, 0);
-o-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
...