lala
html {
background-color: #111;
}
.wrapper {
position: relative;
height: 100px;
width: 100%;
overflow: hidden;
}
.movingsection {
position: absolute;
-webkit-animation: slide 1s infinite linear;
animation: slide 1s infinite linear;
}
.bauble {
float: left;
margin-left: -10px;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
border-left: 10px solid #eee;
border-top: 10px solid #eee;
border-right: 10px solid #eee;
height: 100px;
width: 200px;
border-radius: 200px 200px 0 0;
}
.bauble.final {
-webkit-animation: rotate 1s infinite linear;
animation: rotate 1s infinite linear;
}
@-webkit-keyframes slide {
from {
margin-left: 0;
}
to {
margin-left: -210px;
}
}
@keyframes slide {
from {
margin-left: 0;
}
to {
margin-left: -210px;
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}