★文章内容学习来源：拉勾教育大前端就业集训营

  • CSS3 出现之前，前端一般使用 Flas***或 JavaScript 制作动画；
  • 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。
  • 在不使用 Flas***或 JavaScript 的情况下，使用什么属性可以实现补间动画（过渡效果）？

补间动画就是知道两端的关键帧，通过计算机自己能计算出中间帧的动画

一、过渡属性介绍

  • 属性名： transition
  • 作用 ： 在不使用 Flas***或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。
  • 语法格式：transition∶ 过渡的属性 过渡时间 运动曲线 延时时间;

二、单一属性写法

属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
1.transition-property介绍
  • none 表示没有属性过渡
  • all 表示所有变化的属性都过渡
  • 属性名使用具体的属性名，多个属性名中间逗号分隔
2.时间
  • 过渡时间：以s秒为单位。
  • 延时时间：以s秒为单位。0 s 也必须加单位。
3.transition-timing-function 介绍
值 描述
linear 规定以相同速度（匀速/线性）开始至结束的过渡效果。
ease 规定慢（开始）→快→（结束）慢的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函数中定义自己的值。x1、x2取是0至1之间的数值，y1、y2取值任意，四个数值表示拉扯的点的两个坐标。
3.1 贝塞尔曲线


三、举例

1.举例：常规情况
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过渡属性举例①</title>
  <style> *{
     margin: 0; padding: 0; } .box1{
     width: 100px; height: 100px; background-color: pink; /* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */ transition: all 2s linear 0s; } .box1:hover {
     width: 400px; height: 300px; } </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

2. 举例：cubic-bezier 函数中定义时间曲线
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>过渡属性举例②</title>
  <style> *{
     margin: 0; padding: 0; } .box2{
     width: 100px; height: 100px; background-color: pink; /* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */ transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s; } .box2:hover {
     width: 400px; height: 300px; } </style>
</head>
<body>
  <div class="box2"></div>
</body>
</html>

四、 浏览器兼容情况

  • Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
  • Safari 需要前缀 -webkit-。
  • 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
  • 为了更方便，通常写两遍，第二遍加前缀： 
transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;
webkit-transition: all 2s cubic-bezier(0.9, 0.17, 0.29, 0.95) 0s;

下篇继续：【44】CSS3 （4）——新增属性②2D 转换