css中的animation

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