css3动画

今天又收获了一个很好的小图标左右滚动的动画。即鼠标移动上去小图标左右滚动，如下。

实现步骤如下：

1.先自定义一个帧动画,如下

@-moz-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
    transform-origin: center top 0;
    }
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

2.然后鼠标移上去的时候，

改变css属性

.nav li:hover i{animation:1s ease 0.2s normal both 1 swing;}

很炫的一个效果有木有

转载于:https://www.cnblogs.com/jiaojiaome/p/4184063.html