图标动效

1.图片旋转，直接在需要转动的元素上添加类名即可。

@keyframes rotation{
    from {transform: rotate(0);}
    to{transform: rotate(360deg);}
}
.zhuan{
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

 

2.指示箭头动效，在需要动效的元素上添加类名即可。

@-webkit-keyframes updown1 {
    0% {
        opacity: 0;
        /* transform: rotate(0deg) translateY(0px); */
    }

    50% {
        opacity: 0.75;
    }

    100% {
        opacity: 0;
        /* transform: rotate(0deg) translateY(-1px); */
    }
}

@keyframes updown1 {
    0% {
        opacity: 0;
        /* transform: rotate(0deg) translateY(0px); */
    }

    50% {
        opacity: 0.75;
    }

    100% {
        opacity: 0;
        /* transform: rotate(0deg) translateY(-1px); */
    }
}

.updown1 {
    animation: updown1 2s infinite;
    -webkit-animation: updown1 2s infinite;
}