什么是css动画?

　　动画使元素逐渐从一种样式变为另一种样式.

　　您可以随意更改任意数量的css属性.

　　如需使用css动画,您必须首先为动画指定一些关 键帧.

　　核心帧包含元素在特定时间所有着的样式.

　　配置动画 创建动画序列,需要使用 animation 属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes 规则完成,主要情况参见 使用 keyframes 定义动画序列 小节部分. animation 的子属性有： animation-delay ...

　　使用 keyframes 定义动画序列 一旦完成动画的时间设定,接下来就需要定义动画的表现. 根据使用 @keyframes 建立两个或两个以上核心帧来完成.东台做网站首先编写大家想要的动画

　　@keyframes 规则

　　要创建css动画,您首先需要了解@keyframes规则,@keyframes规则用来定义动画各个阶段的属性值

　　优点

　　浏览器会对css3动画做一些提升,导致css3动画配置上稍有优点(新建一个图层来跑动画).东台做网站

　　css3动画的代码相对简单. css缺点：

　　动画控制上不够灵活.

　　兼容性不佳

　　部分动画无法完成(视差效果、滚动动画)

　　语法说明如下：

　　核心帧有两种写法：

　　from....to

　　百分比模式%

　　@keyframesdot{

　　from {background-color: red;}

　　to {background-color: yellow;}

　　}

　　上下效果同等.

　　@keyframesdot{

　　0% { background-color: red;}

　　100% {background-color: yellow;}

　　}

　　接下来编写完动画,需要使用该动画.

　　animation-name：设定需要绑定到元素的动画名称;

　　animation-duration：设定完成动画所需要花费的时间,单位为秒或毫秒,默认为 0;

　　animation-timing-function：设定动画的快速曲线,默认为 ease;

　　animation-fill-mode：设定当动画不播放时(动画播放完或延时播放时)的状态;

　　animation-delay：设定动画开始之前的延时时间,默认为 0;

　　animation-iteration-count：设定动画被播放的次数,默认为 1;

　　animation-direction：设定是否在下一周期逆向播放动画,默认为 normal;

　　animation-play-state：设定动画是正在执行还是暂停,默认是 running;

　　animation：所有动画属性的简写属性.

　　css的形体变化 —— transform api只能转换由盒模型定位的元素.

　　translate(chinamobile)

　　scale(缩放)

　　rotate(旋转)

　　skew(倾斜)