mattawise
1/26/2017 - 11:14 AM

Animated mouse scroller

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>