过渡与动画

过渡 ( Transition )

贝塞尔曲线

transition

• 语法：transition：[ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
• 默认值：看每个独立属性；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 属性值解析：
• <transition-property>：检索或设置对象中的参与过渡的属性;
• <transition-duration>:检索或设置对象过渡的持续时间;
• <transition-timing-function>:检索或设置对象中过渡的动画类型;
• <transition-delay>:检索或设置对象延迟过渡的时间;
• 特殊说明：
• 如果只提供一个<time>参数，则为 <transition-duration> 的值定义；如果提供二个<time>参数，则第一个为 <transition-duration> 的值定义，第二个为 <transition-delay> 的值定义;
• 可以为同一元素的多个属性定义过渡效果;

---

transition-property

• 语法：transition-property：none | all | <single-transition-property>[ ,<single-transition-property> ]*
• 默认值：all；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：
• none：不指定过渡的css属性；
• all：所有可以进行过渡的css属性；
• <single-transition-property>:指定要进行过渡的css属性;
• 特殊说明：
• 默认值为all。默认为所有可以进行过渡的css属性。
• 如果提供多个属性值，以逗号进行分隔。

---

transition-duration

• 语法：transition-duration:<time>[ ,<time> ]*
• 默认值：0；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值
• 属性值解析：
• time：指定对象过渡的持续时间；
• 特殊说明：
• • 如果提供多个属性值，以逗号进行分隔；

---

transition-timing-function

• 语法：transition-timing-function：<single-transition-timing-function>[,<single-transition-timing-function>]*
• single-transition-timing-function = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
• 默认值：ease；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：
• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
• ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
• ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
• ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
• step-start：等同于 steps(1, start)；
• step-end：等同于 steps(1, end)；
• steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end;
• cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内;
• 特殊说明：
• 如果提供多个属性值，以逗号进行分隔；

---

transition-delay

• 语法：transition-delay：transition-delay:<time>[ ,<time> ]*
• 默认值：0；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：
• time：指定对象过渡的延迟时间；
• 特殊说明：
• 如果提供多个属性值，以逗号进行分隔；

transition-property:{1,n}; 
transition-delay:{1,n}; 
transition-duration:{1,n}; 
transition-timing-function: ease;

#box{
    /*背景颜色，宽度和高度的过渡（渐变）*/
    /* 有all值，并不能保证所有的样式全部发生改变，因为有些样式是无法发生过渡，例如：字体大小*/
    transition-property: background-color,width,height; 
    
    /*过渡的延迟时间，即：多久后开始激活样式*/
    transition-delay:2s; 
    
    /*动作执行的总时间，即：颜色过渡的时间为3s，宽度为10s，高度为3s*/
    transition-duration:3s,10s; /* 没有对应值时，采用第一个值*/
    
    /* 时间曲线 */
    transition-timing-function: ease;
}
#box:hover{	/*当hover被激活时，开始过渡*/
    background-color:red;
    width:100px;
    height:100px;
}

动画 ( @keyframes{})

@ 规则keyframes 动画函数 动画名称，名称不能用数字或中文

animation 属性

• 作用：复合属性，检索或设置对象所应用的动画特效；
• 语法：animation：<single-animation>[,<single-animation>]*
• single-animation = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
• animation：动画名，执行时间，延迟时间，结束状态，次数
• 默认值：看每个独立的属性；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：看每个独立属性；
• 属性值解析：

• animation-name : 检索或设置对象所应用的动画名称；
• animation-duration: 检索或设置对象动画的持续时间；
• animation-timing-function: 检索或设置对象动画的过渡类型；
• animation-delay: 检索或设置对象动画延迟的时间；
• animation-iteration-count: 检索或设置对象动画的循环次数；
• animation-direction : 检索或设置对象动画在循环中是否反向运动；

• 特殊说明：

• 如果提供多组属性值，以逗号进行分隔；
• 如果只提供一个<time>参数，则为<animation-duration>的值定义；如果提供二个<time>参数，则第一个为 <animation-duration> 的值定义，第二个为 <animation-delay> 的值定义;

---

animation-name 属性

• 作用：检索或设置对象所应用的动画名称；
• 语法：animation-name:<single-animation-name>[,<single-animation-name>]*
• <single-animation-name> = none | <identifier>
• 默认值：none；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：

• none：不引用任何动画名称；
• <identifier> : 定义一个或多个动画名称(identifier标识);

• 特殊说明：

• 必须与规则@keyframes配合使用,因为动画名称由@keyframes定义；
• 如果提供多个属性值，以逗号进行分隔；

---

animation-duration 属性

• 作用：检索或设置对象动画的持续时间；
• 语法：animation-duration:<time>[,<time>]*
• 默认值：0s；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：
• <time> ：指定对象动画执行持续时间；
• 特殊说明：如果提供多个属性值，以逗号进行分隔；

---

animation-timing-function 属性

• 作用：检索或设置对象动画的过渡类型；
• 语法：animation-timing-function：<single-animation-timing-function>[,<single-animation-timing-function>]*
• single-animation-timing-function = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
• 默认值：ease；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：

• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
• ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
• ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
• ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
• step-start：等同于 steps(1, start)；
• step-end：等同于 steps(1, end)；
• steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end；

即：调节帧数，steps(2) 表示2帧，在0点为第一帧，动作的一半距离为第二帧；steps(2,start)动作一半距离为第一帧

• cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内;

• 特殊说明：

• 如果提供多个属性值，以逗号进行分隔；

---

animation-delay 属性

• 作用：检索或设置对象动画的延迟时间；
• 语法：animation-delay:<time>[,<time>]*
• 默认值：0s；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：

• <time> ：指定对象动画执行持续时间；
• 特殊说明：如果提供多个属性值，以逗号进行分隔；

---

animation-iteration-count 属性

• 作用：检索或设置对象动画的循环次数；
• 语法：animation-iteration-count：<single-animation-iteration-count>[,<single-animation-iteration-count>]*
• 默认值：1；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：

• infinite：无限循环；
• <number>：指定对象动画的具体循环次数；

• 特殊说明：

• 如果提供多个属性值，以逗号进行分隔；

---

animation-direction 属性：

• 作用：检索或设置对象动画在循环中是否反向运动；
• 语法：animation-direction:<single-animation-direction>[,<single-animation-direction>]*
• <single-animation-direction> = normal | reverse | alternate | alternate-reve
• 默认值：normal；
• 适用于：所有元素，包含伪对象:after和:before；
• 继承性：无；
• 计算值：指定值；
• 属性值解析：

• normal：正常方向；
• reverse：反方向运行；
• alternate：动画先正常运行再反方向运行，并持续交替运行；
• alternate-reverse：动画先反运行再正方向运行，并持续交替运行；

• 特殊说明：

• 如果提供多个属性值，以逗号进行分隔；

animation-play-state属性

paused暂停，处于准备状态

animation-fill-mode

animation-fill-mode : none | forwards | backwards | both;

none：不改bai变默认行为。

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。

详细描述动画与过度之间的区别。

动画出发时间可以通过属性来进行设置；

过渡只有在样式发生变化时才会被触发。

.switch-openlink{
  left: 2.5rem;
  animation-name: 动画名称;
  animation-delay: 0s;	/*延迟时间*/
  animation-duration: 0.5s; /*动画总时长*/
  animation-timing-function: ease; /*动画曲线*/
  animation-fill-mode:forwards; /*保持动画最终状态*/
}
@keyframes 动画名 {
  from {
    left: 8.5rem;
   }
  to{
    left: 2.5rem;
  }
}