本文主要是介绍认识css关键帧动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一，css动画
我们可以使用 CSS3的一些属性，能够创建动画，可以在许多网页中取代动画图片、Flash 动画以及JavaScript
二，关键帧动画的了解
animation这个属性也就是关键帧动画，配合@keyframs的使用，可以绘制一个简单的动画效果， transition这个属性作用就是可以作为过度的作用，可以让动画在规定的时间里面执行， transform这个属性的作用可以让规定的内容出现旋转，伸缩，移动。
1,兼容性
IE10+、Firefox 以及 Opera 支持animation和@keyframs，而Chrome 和 Safari 需要前缀 -webkit-。
2，@keyframs关键帧属性
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，
或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
写法：
//第一种写法@keyframes move{
2 from{}
3 to{}
4 } }
//第二种写法@keyframes move{
2 0%{}50%{}100%{}
4 } }
可以在每个括号里面设置每个阶段变化的属性，从而实现简单的动态效果
3，Animation 属性
当在 @keyframes 中创建动画时，还要把它捆绑到某个选择器，否则不会产生动画效果，绑定后设置动画的名称和动画的时长
过渡类型：
- linear：线性过渡。
- ease：平滑过渡。
- ease-in：由慢到快。
- ease-out：由快到慢。
- ease-in-out：由慢到快再到慢。
- step-start:马上跳到动画每一结束桢的状态
循环次数：
infinite：无限循环，或者是随意设置循环几次
运动方向：
- normal：正常方向
- reverse：反方向运行
- alternate：动画先正常运行再反方向运行
- alternate-reverse：动画先反运行再正方向运行
动画状态：
- running:运动
- paused: 暂停
对于书写Animation 属性，建议简写，也就是把每个属性都写在一起
div{animation: move 10s ease-in normal infinite ;}@keyframes move{
2 0%{}50%{}100%{}
4 } }
这篇关于认识css关键帧动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
