animation
- 关键帧——keyframes
- 关键帧的时间单位 数字： 0% 25% 100%等
- 字符： from(0%)、 to(100%)
- 格式： @keyframes 动画名称 { 动画状态}
- demo1如下
<style> @-webkit-keyframes move { 0% { width: 100px; } 100% { width: 500px; } } .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move;} </style> <body> <div class="box"> </div> </body>
- 若不写0% 和 100%，则默认都为初始设置的，demo如下
<style> @-webkit-keyframes move { 50% { width: 500px; } } .box { width: 100px; height: 100px; background: red; -webkit-animation: 2s move ease infinite;} </style> <body> <div class="box"> </div> </body>
- 同时可添加动画运动形式， linear（匀速）、ease（缓冲）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）、cubic-bezier（number、number、number、number）特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内，demo见上一个
- animation-iteration-count，重复次数，可写数值，若为infinite表示无限次，demo见上一个
- animation-delay，动画延迟（只是第一次）
- animation-direction属性定义是否应该轮流反向播放动画：normal（动画正常播放）、alternate（动画应该轮流反向播放）
- 让动画运动完之后停在某个位置，可在class中设置好结尾状态，在0%的时候设置一个初始状态，demo如下
<style> @-webkit-keyframes move { 0% { width: 100px; } 100% { width: 500px; } } .box { height: 100px; background: red; } .move { -webkit-animation: 2s move; width: 500px;} </style> <body> <div class="box move"> </div> </body>
- animation-play-state规定动画正在运行还是暂停，paused（动画暂停）、running（动画正在播放）
- 以上属性，可分别加前缀 -moz-keyframes , -o-keyframes, keyframes, -webkit-keyframes来支持不同的浏览器
- 使用animation实现的无缝滚动
<style> @-webkit-keyframes move { 0% { left: 0; } 100% { left: -500px; } } #wrap {width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden;} #list {position: absolute; left: 0; top: 0; margin: 0; padding: 0; width: 200%; -webkit-animation: 3s move infinite linear;} #list li {list-style: none; float: left; width: 98px; height: 98px; border: 1px solid #FFF; background: #000; color: #FFF; font-size: 98px; text-align: center;} #wrap:hover #list {-webkit-animation-play-state: paused;} </style><body> <div id="wrap"> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body>