本文已参与「新人创作礼」活动，—起开启掘金创作之路。

过渡

动画和过渡的区别

动画和过渡类似，都是可以实现一些动态的效果；
不同的是过渡需要在某个事件来触发，而动画可以自动触发动态效果；
设置动画效果，必须先要设置一个关键帧（@keyframes），关键帧设置了动画执行每一个步骤。

过渡的概率

过渡是元素从一种样式逐渐改变为另一种的效果。

作用

可以指定一个属性发生变化时的切换方式；
可以创建一些非常好的效果，提升用户的体验。

过渡的连写方式

指定过渡属性

transition-property 指定要执行过渡的属性。

none：没有属性获得过渡
all：给所有属性都设置上过渡
property：定义多个过渡效果的 CSS 属性名称列表，列表以逗号分隔

比如：transition-property: all; transition-property: height , width;

 <style>
   div {
     width: 100px;
     height: 100px;
     background-color: pink;
     /* transition-property: all; */
     /* 两种方式效果一样 */
     transition-property: width, height;
   }
 
   div:hover {
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
   <div></div>
 </body>

)

过渡持续时间

transition-duration 设置过渡效果的执行时间，也就是过渡完成一个周期所花费的时间。

时间单位可以选择s 或者ms （1s = 1000ms），时间越长，过渡的动画效果就会越慢。

比如：transition-duration: 4s; transition-duration: 100ms, 2s;

 <style>
   div {
     width: 100px;
     height: 100px;
     background-color: pink;
     transition-property: all;
     transition-duration: 2s;
   }
 
   div:hover {
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
   <div></div>
 </body>

过渡的速度曲线

transition-timing-function 设置过渡切换效果的速度。

可以设置的值：

ease：先加速在减速，默认
ease-in：加速
ease-out：减速
ease-in-out：以低速开始和结束
linear：匀速
steps(int,start|end) ：间隔数量 (步长)
- int：间隔数，是一个正整数（大于 0）
- start：可选，动画的第一帧会被立即执行，直接从第二帧开始，然后以第一帧结束
- end：可选，从第一帧开始到正常结束，默认
cubic-bezier(n,n,n,n) ：设置自己想要的值，值可以是从 0 到 1 的数值
steps(int,start|end) ：间隔数量 (步长)
- int：间隔数，是一个正整数（大于 0）
- start：可选，在时间开始时执行过渡
- end：可选，在时间结束时执行过渡，默认

 <style>
   div {
     width: 100px;
     height: 100px;
     background-color: pink;
     transition-property: all;
     transition-duration: 2s;
     /* transition-timing-function: steps(2, start); */
     transition-timing-function: steps(2);
   }
 
   div:hover {
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
   <div></div>
 </body>

steps(2,start)效果

steps(2)效果

过渡的延迟

animation-delay 设置过渡什么时候开始，也就是延迟时间是多久。 (默认是0)

比如：transition-delay: 2s;

 <style>
   div {
     width: 100px;
     height: 100px;
     background-color: pink;
     transition-property: all;
     transition-duration: 2s;
     transition-timing-function: steps(2);
     transition-delay: 2s;
   }
 
   div:hover {
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
   <div></div>
 </body>

过渡的简写方式

transition 可以同时设置过渡相关的所有属性，多个过渡效果用,分隔。

注意：如果既有持续时间，也有延迟时间，则 第一个 是 持续时间 ，第二个 是 延迟时间。

语法：transition：要过渡的属性持续时间速度曲线延迟时间；

 <style>
   div {
     width: 100px;
     height: 100px;
     background-color: pink;
     transition: all 2s steps(2) 2s;
   }
 
   div:hover {
     width: 200px;
     height: 200px;
   }
 </style>
 <body>
   <div></div>
 </body>

兼容

在IE9及以下不兼容

-moz-: 支持 Firefox 更早的版本
-webkit-: 支持 Chrome 和 Safari 更早版本
-o-：支持 Opera 更早的版本

CSS3中的过渡知识点整理

过渡