.mouse {
    display: inline-block;
    width: 40px;
    height: 60px;
    border: 2px solid white;
    border-radius: 100px;
}
    .mouse > .wheel {
         display: inline-block;
         width: 4px;
         height: 8px;
         border-radius: 8px;
         background-color: #fff;
        /* background-image: url(../img/mouse.jpg);
         background-size: contain;*/
         margin-top: 50px;
         animation-name: pele;
         animation-duration: 1s;
         animation-iteration-count: infinite;
    }
    .mouse > .wheel:hover {
        animation-play-state: paused;
   }

@keyframes pele {
    0% {
        margin-top: 10px;
        background-color: #ffff;
        /*transform: rotate(0deg);*/
    }
    40%{
        background-color: #ffff;

    }
    100% {
        margin-top: 38px;
        background-color: #fff0;
        /*transform: rotate(720deg);*/
    }
}