css的animation
animation是一个综合属性,是animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline这些属性的简写
不过在使用的时候，只有animation-name和animation-duration是必须的
例如:
animation:testkeyframe 3s
我们也可以做更多的设置
例如:
animation:testkeyframe 3s linear 1s infinite
//对应的属性
//animation:
//testkeframe关键帧名字
//3s动画持续时间
//linear动画时间曲线
//1s动画在多少时间之后开始执行
//infinite动画循环次数
其中关键帧名字是对@keyframes的引用
@keyframes testkeyframe{0%{}50%{}100%{}
}
注意事项:
@keyframes中改变的属性必须是
调用关键帧的元素里面已有的属性比如调用关键帧的那个元素已有了
transform:translateX(100px)这样才能在@keyframe中不同阶段进行调整
示例:
html
<div class="container"><div class="testEl"></div> </div>css
.container{position: relative;margin: 50px auto;width: 500px;height: 500px;border-radius: 5px;box-shadow: 1px 1px 10px 5px #d5d5d5;}.testEl{position:absolute;top: 20px;left: 20px;width: 100px;height: 100px;background-color: #aff;transform: translateX(0px); //元素本身已有的属性，才能实现动画效果animation: testAn 3s linear infinite 1s;}@keyframes testAn {0%{transform: translateX(0px);}50%{transform: translateX(20px);}100%{transform: translateX(0px);}}此外还需要注意的是：
animation属性的值animation-duration和animation-delay必须严格顺序：
name→duration→delay其他的内容可以自由搭配，不过都需要在
name的后面按照正确的顺序，才能正常解析成我们所需的动画效果
animation:testkeyframe 3s linear 1s infinite //这里的3s就是animation-duration //这里的1s就是animation-delay
