css3实现自动向上滚动，鼠标移入暂停滚动

css实现自动向上轮播，效果图：

 

实现方式：

外层div的盒子加入：

div{
    position:relative;
    animation: moveUp 8s 1s infinite;
    -webkit-animation: moveUp 8s 1s infinite;
    &:hover{
        animation-play-state:paused;
        -webkit-animation-play-state:paused;
    }
}

设置关键帧

@keyframes moveUp{
    0% {top:0;}
    18% {top:0;}
    20% {top:-28px;}
    38% {top:-28px;}
    40% {top:-56px;}
    58% {top:-56px;}
    60% {top:-84px;}
    78% {top:-84px;}
    80% {top:-112px;}
    98% {top:-112px;}
}
@-webkit-keyframes moveUp{
    0% {top:0;}
    18% {top:0;}
    20% {top:-28px;}
    38% {top:-28px;}
    40% {top:-56px;}
    58% {top:-56px;}
    60% {top:-84px;}
    78% {top:-84px;}
    80% {top:-112px;}
    98% {top:-112px;}
}