CSS3过渡与动画

Mr.ZhaoAbout 4 min

1. 过渡

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

1.1 transition-property

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会有过渡效果

常用值：

  1. none ：不过渡任何属性
  2. all ：过渡所有能过渡的属性
  3. 具体某个属性名，例如： width 、 heigtht，若有多个以逗号分隔

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

1.2 transition-duration

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久

常用值：

  1. 0 ：没有任何过渡时间 —— 默认值
  2. s 或 ms ：秒或毫秒
  3. 列表 ：
    • 如果想让所有属性都持续一个时间，那就写一个值
    • 如果想让每个属性持续不同的时间那就写一个时间的列表

1.3 transition-delay

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

1.4 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)： 特定的贝塞尔曲线类型

在线制作贝塞尔曲线： cubic-bezier✿open in new window

1.5 transition 复合属性

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

transition:1s 1s linear all;

2. 动画

2.1 什么是帧

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

2.2 什么是关键帧

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

2.3 动画的基本使用

第一步：定义关键帧（定义动画）

简单定义方式：

/*写法一*/ 
@keyframes 动画名 {
	from {
		/*property1:value1*/
		/*property2:value2*/
	} 
	to {
		/*property1:value1*/
	}
}

完整定义方式：

@keyframes 动画名 {
	0% {
		/*property1:value1*/
	}
	20% {
		/*property1:value1*/
	} 
	40% {
		/*property1:value1*/
	} 
	60% { 
		/*property1:value1*/
	} 
	80% {
		/*property1:value1*/
	} 
	100% {
		/*property1:value1*/
	}
}

第二步：给元素应用动画，用到的属性如下：

  1. animation-name ：给元素指定具体的动画（具体的关键帧）
  2. animation-duration ：设置动画所需时间
  3. animation-delay ：设置动画延迟
.box {
	/* 指定动画 */
	animation-name: testKey;
	/* 设置动画所需时间 */
	animation-duration: 5s;
	/* 设置动画延迟 */
	animation-delay: 0.5s;
}

2.4 动画的其他属性

  • animation-timing-function ，设置动画的类型，常用值如下：

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

  • animation-iteration-count ，指定动画的播放次数，常用值如下：

    • number ：动画循环次数
    • infinite ： 无限循环

  • animation-direction ，指定动画方向，常用值如下：

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

  • animation-fill-mode ，设置动画之外的状态，常用值如下：

    • forwards ： 设置对象状态为动画结束时的状态
    • backwards ： 设置对象状态为动画开始时的状态

  • animation-play-state ，设置动画的播放状态，常用值如下：

    • running ： 运动 (默认)
    • paused ： 暂停

2.5 动画复合属性

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

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

备注： animation-play-state 一般单独使用