CSS动画效果（animation属性）解析
CSS动画效果（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的常⽤属性值如下：
属性值描述
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。
ease-in-out动画以低速开始和结束。
属性值描述
cubic-bezier(n,n,n,n)在cubic-bezier函数中⾃⼰的值。可能的值是从0到1的数值。
animation-delay属性
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;
margin属性值可以为百分比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设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论