css中的动画

css动画：

在原本上C3已经有了过度属性——transition,但是该过度属性并不能自动播放，也不能循环等等，因此要 想要这种效果就得用到C3中的动画属性。

动画的优点

相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的使用分为定义动画和引入动画两步

定义动画基本格式为：@keyframes 动画名称{0%{}；100%{}；} 动画的引入：必须要写两种属性，animation-name（动画名称）和animation-duration(持续时间)； 需要注意的是定义动画一定要有这个@；引入动画不能缺少以上两个属性。 动画的其他属性：animation-timing-function(动画的速度曲线)；animation-delay(定义动画何时开始)； animation-iteration-count(设置播放次数)；animation-direction(规定动画下一周期是否逆向播放）； animation-play-state(规定动画是否继续)；animation-fill-mode(规定动画下一周期是否逆向播放)； 动画的属性的简写：animation:动画名称 持续时间 动画的速度曲线 动画何时开始 播放次数 动画下一周期是否逆向播放 动画下一周期是否逆向播放

动画的例子

div { width: 100px; height: 100px; background-color: #00a4ff; animation-name: move;必写 animation-duration: 10s; animation-name: move; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards; } div { width: 100px; height: 100px; background-color: #00a4ff; animation: move 3s linear 1s 2 alternate; } div:hover { animation-play-state: paused; } @keyframes move { 0% { transform: translate(0px, 0px); } 100% { transform: translate(1000px, 0px); } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0px, 500px); } 100% { transform: translate(0px, 0px); ** /* 百分号表示时间 */** } body { perspective: 500px; } img { transform: rotate3d(100, 100, 0, 45deg); }