Animated mouse scroller
.scroll {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
z-index: 2;
}
span.arrows {
display: block;
width: 7px;
height: 7px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
border-right: 2px solid white;
border-bottom: 2px solid white;
margin: 0 0 5px 6px;
}
.unu {
margin-top: 6px;
}
.unu, .doi, .trei {
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
}
.unu {
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
}
.doi {
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
}
.trei {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
}
.mouse {
height: 41px;
width: 21px;
border-radius: 10px;
transform: none;
border: 2px solid white;
margin: 0 0 5px 0;
}
.wheel {
height: 7px;
width: 2px;
display: block;
margin: 6px auto;
background: white;
position: relative;
}
.wheel {
-webkit-animation: mouse-wheel 1.2s ease infinite;
-moz-animation: mouse-wheel 1.2s ease infinite;
}
@-webkit-keyframes mouse-wheel {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
}
@-moz-keyframes mouse-wheel {
0% {
top: 1px;
}
50% {
top: 2px;
}
100% {
top: 3px;
}
}
@-webkit-keyframes mouse-scroll {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@-moz-keyframes mouse-scroll {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@-o-keyframes mouse-scroll {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
@keyframes mouse-scroll {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
<div class="scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="arrows"><span class="arrows unu"></span> <span class="arrows doi"></span> <span class="arrows trei"></span> </div>
</div>
<div class="scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div class="arrows"><span class="arrows unu"></span> <span class="arrows doi"></span> <span class="arrows trei"></span> </div>
</div>