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;}
}