mousescrolleffect.css

.mousescroll {
    border: 3px solid #FFF;
    width: 30px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -15px;
    border-radius: 15px;
}

.mousescroll:after {
    top: 55px;
    width: 100px;
    text-align: center;
    content: 'scrolluj w dół';
    position: absolute;
    left: 50%;
    margin-left: -50px;
    font-size: 10px;
    text-transform: uppercase;
}

.mousescroll:before {
    left: 50%;
    top: 35px;
    content: '';
    position: absolute;
    margin-left: -4px;
    width:0px;
    height:0px;
    border-right:4px solid transparent;
    border-left:4px solid transparent;
    border-bottom:4px solid #FFF;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.mousescroll:before {

    animation-name: arrowmouse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes arrowmouse {
    0%   {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}

.mousescroll .bullet {
    width: 5px;
    position: relative;
    height: 5px;
    margin: auto;
    margin-bottom: 3px;
    background: #FFF;
    border-radius: 3px;
}

.mousescroll .bullet.b1 {
    margin-top: -10px
}

.mousescroll .bullet.b1 {
    opacity: 0;
    animation-name: b1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.mousescroll .bullet.b2 {
    opacity: 0;
    animation-name: b2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.mousescroll .bullet.b3 {
    animation-name: b3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    opacity: 0;
}
.mousescroll .bullet.b4 {
    animation-name: b4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    opacity: 1;
}
.mousescroll .bullet.b5 {
    animation-name: b5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    opacity: 1;
}
.mousescroll .bullet.b6 {
    animation-name: b6;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    opacity: 1;
}

@keyframes b1 {
    0%   {opacity: 0; top: 0;}
    20%  {opacity: 0; top: 8px;}
    40% {opacity: 0.5; top: 16px;}
    60% {opacity: 1; top: 24px;}
    80% {opacity: 0.5; top: 32px;}
    100% {opacity: 0; top: 40px;}
}
@keyframes b2 {
    0%   {opacity: 0; top: 0;}
    20%  {opacity: 0.5; top: 8px;}
    40% {opacity: 1; top: 16px;}
    60% {opacity: 0.5; top: 24px;}
    80% {opacity: 0; top: 32px;}
    100% {opacity: 0; top: -8px;}
}
@keyframes b3 {
    0%   {opacity: 0.5; top: 0;}
    20%  {opacity: 1; top: 8px;}
    40% {opacity: 0.5; top: 16px;}
    60% {opacity: 0; top: 24px;}
    80% {opacity: 0; top: -16px;}
    100% {opacity: 0; top: -8px;}
}
@keyframes b4 {
    0%   {opacity: 1; top: 0;}
    20%  {opacity: 0.5; top: 8px;}
    40% {opacity: 0; top: 16px;}
    60% {opacity: 0; top: -24px;}
    80% {opacity: 0; top: -16px;}
    100% {opacity: 0.5; top: -8px;}
}
@keyframes b5 {
    0%   {opacity: 0.5; top: 0;}
    20%  {opacity: 0; top: 8px;}
    40% {opacity: 0; top: -32px;}
    60% {opacity: 0; top: -24px;}
    80% {opacity: 0.5; top: -16px;}
    100% {opacity: 1; top: -8px;}
}
@keyframes b6 {
    0%   {opacity: 0; top: 0;}
    20%  {opacity: 0; top: -40px;}
    40% {opacity: 0; top: -32;}
    60% {opacity: 0.5; top: -24px;}
    80% {opacity: 1; top: -16px;}
    100% {opacity: 0.5; top: -8px;}
}

mousescrolleffect.html

        <div class="mousescroll">
            <div class="bullet b1"></div>
            <div class="bullet b2"></div>
            <div class="bullet b3"></div>
            <div class="bullet b4"></div>
            <div class="bullet b5"></div>
            <div class="bullet b6"></div>
        </div>