前言

此文为本前端萌新第一篇文章，若有不足，请望斧正和轻喷。

最近对前端图形及动画有点感兴趣，于是稍微学了学，写篇文章记录巩固一下，以下是正文

transition介绍

transition简而言之就是图形变化之中的一个过渡效果，若不设置这个过渡，则会出现属性的突变。如下图所示：

动画1.gif

而设置了transition过渡属性，效果则可以如下图所示：

动画2.gif 由此我们可以发现，在元素位置及宽高进行变化时，设置transition是很有必要的，那么下面我们来了解一下transition的属性及用法吧

transition：all 2s ease-in-out 1s;这是transition的简写，包含了四个属性，分别是transition-property，transition-duration，transition-timing-function，transition-delay，下面就来详细说说这四个属性吧！

1. transition-property

transition-property是表示对哪个属性进行一个过渡，初始值为all，即对所有变化的属性进行一个过渡效果，以下举几个例子直观的说明以下

transition-property设置为all

<div style="height:100%;width:100%;position: absolute;">
    <div id="circle"></div>
</div>
#circle{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: red;
    transform: translate(-50%,-50%);
    transition: all 2s ease-in-out 1s ;
  }
  #circle:hover{
    height: 200px;
    width: 200px;
  }

效果如下：

动画2.gif

transition-property设置为height

<div style="height:100%;width:100%;position: absolute;">
    <div id="circle"></div>
</div>
#circle{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: red;
    transform: translate(-50%,-50%);
    transition: height 2s ease-in-out 1s ;
  }
  #circle:hover{
    height: 200px;
    width: 200px;
  }

效果如下，我们可以看到宽度是瞬间变化的，而高度是有过渡动画的

动画3.gif 相信说到这，大家应该也都理解transition-property是干什么的了，就是选中要设置过渡动画的属性，当然这些属性不仅仅是高度和宽度，还包括margin和定位之类的，下面是对定位进行动画过渡的例子

 <div style="height:100%;width:100%;position: absolute;">
    <div id="circle"></div>
 </div>
 #circle{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: red;
    transform: translate(-50%,-50%);
    transition: top 2s ease-in-out 1s ;
  }
 <script>
  let div = document.getElementById("circle");
  div.onclick = function(){
    div.style.top = "40%";
    div.style.left = "40%";
  }
</script>

效果如下图所示：

动画4.gif

2. transition-duration

transition-duration属性就是表示过渡动画的持续时间，时间越长，动画越慢，初始默认值为0，即表示没有过渡动画效果默认值效果如下

 <div style="height:100%;width:100%;position: absolute;">
    <div id="circle"></div>
 </div>
 #circle{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: red;
    transform: translate(-50%,-50%);
    transition: all ease-in-out;
  }
  <script>
  let div = document.getElementById("circle");
  div.onclick = function(){
    div.style.height = "200px";
    div.style.width = "200px";
  }
</script>

动画5.gif 而设置了持续时间为2s的效果如下：

动画6.gif 然后我们还得注意到一个小问题，那就是在transition中，默认transition-duration是在第二位的，但是如果我们在末尾第四位的位置上，也就是delay的位置上设置了时间，而在第二位没有设置时间的话，会默认把第四位的原本属于delay的属性提升到第二位，赋值给transition-duration。代码如下：

<div style="height:100%;width:100%;position: absolute;">
    <div id="circle"></div>
</div>
#circle{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: red;
    transform: translate(-50%,-50%);
    transition: all  ease-in-out 2s;
  }
  <script>
  let div = document.getElementById("circle");
  div.onclick = function(){
    div.style.height = "200px";
    div.style.width = "200px";
  }
</script>

效果如下：

动画7.gif 那么如果，我们要设置延时，但是不要设置过渡动画时间要怎么办呢，那么我们可以这样写： transition: all 0s ease-in-out 2s;或者 transition: all ease-in-out; transition-delay:2s;或者也可以在js中直接设置定时器就可以了，当然不设置transition-duration的话，那么transition-property和transition-timing-function也就没啥用了，也就transition-delay还可以起作用。

3. transition-timing-function

默认取值为 ease

下面我们来看一下各种取值的意义和效果吧

动画7.gif

值	描述
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
linear		规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease-in		规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out		规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)
ease-in-out		规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
step-start		等同于 `steps(1, start)`,过渡效果分一步完成，在步的起始开始，即直接过渡到效果
step-end		等同于 `steps(1,end)`，过渡效果分一步完成，在步的结束开始，即`transition-duration`之后完成过渡效果
steps()		`steps`有两个参数。第一个参数表示把动画分割成几次。第二个参数可以取 `start` 或 `end` 两者其一，默认为`end`，指定在每个间隔的起点或是终点发生阶跃变化，如上图取`end`，那么就是在0.25,0.5,0.75和1s时发生变化，若取值为`start`，则会在0,0.25,0.5,0.75s是发生变化
cubic-bezier()		这个是贝塞尔曲线，贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。我们可以通过改变P1和P2两个点来改变这个动画的速度曲线，取值有四个（x1,y1,x2,y2）表示P1,P2两个点的坐标。cubic-bezier.com/可以用这个小工具来看一下两个点所确定的速度曲线

4. transition-delay

这个就没啥太多好说的啦，就是表示动画延迟发生的时间，默认值为0。个人觉得是非常好用的一个属性，可以不用JavaScript就实现一个延迟效果。

总结

对于transition的四个属性也介绍的差不多了，一般我们写的时候可以把四个属性放在一起，也就是简写形式。我们还可以对元素不同的属性设置不同的过渡效果比如transition: height 2s linear,width 2s ease;

参考连接

developer.mozilla.org/zh-CN/docs/…

CSS3 Transition属性介绍及实践

前言