CSS3之过渡与动画

过渡

过渡可以在不使用JavaScript的情况下，让元素从一种样式，平滑过渡到另一种样式。

transition-property

• 作用：定义那个属性需要过渡，只有在该属性钟定义的属性（比如宽、高、颜色等）才会有过渡效果。
• 常用值：
  1. none：不过渡任何属性。
  2. all：过渡所有能过渡的属性。
     transition-property: all
  3. 具体某个属性名：例如：width、height，若有多个逗号分隔。
     transition-property: width, height, background-color;

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。
常见的过度属性有，颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性、阴影。

transition-duration

• 作用：定义过渡的持续时间，即：一个状态过渡到另一个状态耗时多久
• 常用值：
  1. 0：没有任何过渡时间 —默认值。
  2. s或ms：秒或毫秒。
  3. 列表：
     • 如果想让所有属性都持续一个时间，那就写一个值。
       transition-duration: 1s;
     • 如果想让每个属性持续不同的时间，那就写一个时间列表。
       transition-duration: 1s,1s,1s;

transition-delay

• 作用：指定开始过渡的延迟时间，单位：s或ms

transition-timing-function

• 作用：设置过渡的类型
• 常用值：
  1. ease：平滑过渡 —默认值
  2. linear：线性过渡
  3. ease-in：慢 —> 快
  4. ease-out：快 —> 慢
  5. ease-in-out：慢 —> 快 —> 慢
  6. step-start：等同于steps(1, start)
  7. step-end：等同于steps(1, end)
  8. steps( integer, ?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的
     步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个
     参数默认值为 end 。
  9. cubic-bezie( number, number, number, number)： 特定的贝塞尔曲线类型。

在线制作贝赛尔曲线：https://cubic-bezier.com

transition复合属性

• 如果设置了一个时间，表示duration；如果设置了两个时间，第一是duration，第二个是delay；其他值没有顺序要求。

例如：transition:1s 1s linear all;

动画

什么是帧

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续
快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流
畅。

什么是关键帧

关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的2-3帧。

动画-基本使用

• 第一步：定义关键帧（定义动画）
  1. 简单方式定义：

@keyframes wangyoudong {
	/* 第一帧 */
	from {}
	/* 最后一帧 */
	to {
		transform: translateX(900px);
		background-color: red;
	}
}

2. 完整方式定义：

/* 定义一个动画（定义一组关键帧） --- 第二种方式 */
@keyframes wangyoudong2 {
    0% {}
    29% {
        background-color: red;
    }
    48% {
        background-color: orange;
    }
    88% {
        background-color: yellow;
    }
    100% {
        transform: translateX(900px);
        background-color: purple;
    }
}

• 第二步：给元素应用动画，用到的属性如下：
  1. animation-name：给元素指定具体的动画（具体的关键帧）
  2. animation-duration：设置动画所需时间
  3. animation-delay：设置动画延迟

.box {
	/* 指定动画 */
	animation-name: testKey;
	/* 设置动画所需时间 */
	animation-duration: 5s;
	/* 设置动画延迟 */
	animation-delay: 0.5s;
}

动画-其他属性

• animation-timing-function，设置动画的类型，常用值如下：
  1. ease：平滑过渡 —默认值
  2. linear：线性过渡
  3. ease-in：慢 —> 快
  4. ease-out：快 —> 慢
  5. ease-in-out：慢 —> 快 —> 慢
  6. step-start：等同于steps(1, start)
  7. step-end：等同于steps(1, end)
  8. steps( integer, ?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的
     步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点。第二个
     参数默认值为 end 。
  9. cubic-bezie( number, number, number, number)： 特定的贝塞尔曲线类型。
• animation-iteration-count，指定动画的播放次数，常用值如下：
  1. number：动画循环次数。
  2. infinite：无限循环
• animation-direction，指定动画方向，常用值如下：

1. normal：正常方向（默认）
2. reverse：反方向运行
3. alternate：动画先正常运行再反方向运行，并持续交替运行。
4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

• animation-fill-mode：设置动画之外的状态
  1. forwards：设置对象状态为动画结束时的状态
  2. backwards：设置对象为动画开始时的状态
• animation-play-state：设置动画的播放状态，常用值如下：
  1. running：运动（默认）
  2. paused：暂停

动画复合属性

只设置一个时间表示duration设置两个时间分别是：duration和delay，其他属性没有数量和顺序要求。

.inner {
	animation: inner1 3s 0.5s linear 2 alternate-reverse forwards;
}