CSS动画效果（animation属性）解析 动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性基础练习总结 动画与变形和过渡的区别
在CSS3中， 过渡 和 变形 只能设置元素的变换过程，并不能对过程中的某一环节进行精确控制，例如 过渡 和 变形 实现的动态效果不能够重复播放。为了实现更加丰富的动画效果，CSS3提供了 animation属性 ，使用 animation属性 可以定义复杂的动画效果。
@keyframes在CSS3中，@keyframes规则用于创建动画。 基本语法格式: @keyframes animationname { keyframes-selector{css-styles;} }
animationname ：表示 当前动画的名称 ，它将作为引用时的 唯一标识 ，因此不能为空。
keyframes-selector ： 关键帧 选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个 百分比、 from 或者 to 。其中， from和0% 效果相同表示动画的开始， to和100% 效果相同表示动画的结束。
css-styles ：定义执行到当前 关键帧 时对应的 动画状态 ，由 CSS样式属性 进行定义，多个属性之间用 分号 分隔，不能为空。
animation-name属性animation-name属性 用于定义要应用的 动画名称 。 基本语法格式：
animation-name: keyframename | none;
animation-name 属性 初始值为 none ，适用于所有 块元素 和 行内元素 。 keyframename 参数用于规定需要绑定到 选择器 的keyframe的 名称 ，如果值为 none ，则表示不应用任何动画，通常用于覆盖或者取消动画。
animation-duration属性animation-duration属性用于定义整个动画效果完成所需要的 时间，以 秒或毫秒计。 基本语法格式：
animation-duration: time;
animation-duration 属性 初始值为 0，适用于所有 块元素和行内元素 。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何 动画效果 。当值为负数时，则被视为0。
animation-timing-function属性animation-timing-function 用来规定动画的 速度曲线 ，可以定义使用哪种方式来执行动画效果。 基本语法格式：
animation-timing-function:value;
animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。 animation-timing-function的常用属性值如下：
animation-delay属性用于定义执行动画效果之前 延迟的时间，即规定动画什么时候开始。 基本语法格式：
animation-delay:time;
参数 time 用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。 animation-delay属性 适用于所有的 块元素 和 行内元素 。
animation-iteration-count属性animation-iteration-count属性用于定义动画的 播放次数
基本语法格式：
animation-iteration-count: number | infinite;
animation-iteration-count属性 初始值为 1 ，适用于所有的 块元素和行内元素 。如果属性值为 number ，则用于定义播放动画的 次数 ；如果是 infinite ，则指定动画 循环播放 。
animation-direction属性animation-direction属性 定义当前动画播放的方向，即动画播放完成后是否 逆向交替循环 。 基本语法格式：
animation-direction: normal | alternate;
animation-direction 属性 初始值为normal，适用于所有的 块元素和行内元素 。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是 “alternate” ，则动画会在 奇数次数 （1、3、5 等等）正常播放，而在 偶数次数 （2、4、6 等） 逆向播放 。
animation属性animation属性 也是一个简写属性，用于综合设置以上六个动画属性。（用空格隔开） 基本语法格式：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
使用 animation属性 时必须指定 animation-name 和 animation-duration 属性，否则持续的时间为0，并且永远不会播放动画。
基础练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> @keyframes moveAndchange { 0%{ left: 0px; top: 0px; } 25%{ left: 200px; top: 200px; background: orange; border-radius: 0; } 50%{ left: 400px; top: 200px; background: orangered; border-radius: 50%; } 75%{ left:400px; top: 0px; background: palegreen; border-radius: 0px; } 100%{ left: 0px; top: 0px; background: aliceblue; border-radius: 50%; } } div{ width: 200px; height: 200px; margin: 200px; position: absolute; background: aqua; border-radius: 50%; animation: moveAndchange 10s; animation-timing-function: ease-out; animation-delay :2s; animation-timing-function: 2; } </style> <body> <div></div> </body> </html> 总结1、keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。 如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。 3、用cubic-bezier设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
