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

很炫的一个效果有木有