在CSS中，有些属性会以shorthand(速写)的方式同时将多个属性整合成一体，而这么做的目的不外乎是为了简化语法以及增加易读性，让日后更好维护。
像是background、font、border等，包括本篇的transition也是。

接下来，我们就先来介绍这个实用的属性吧!

---

CSS Transition

transition 的中文名称叫作「转场」，也有人说是动画，因为css有个属性叫Animation，为了不被混淆，自己是偏好讲「转场」，欸不过还是讲英文最乾脆啦(๑•̀ㅂ•́)و✧

相信大家都有做过PPT的经验吧?利用转场来将画面做转换。css transition也是差不多的概念，透过转场来控制画面转变的时间及变化曲线。

主要由以下4个属性所组成:

transition 属性说明transition-propertyCSS 属性名称transition-duration持续时间transition-delay延迟时间transition-timing-function渐变函式

p.s这四个属性可以用transition取代，中间用空格隔开各个属性值

transition: <property> <duration> <timing-function> <delay>;

待会的实例可以更清楚的说明

---

transition-property

=> 想要针对什么属性做改变，例如:width、height、margin等

p.s并非所有css属性都可以写入css transition，可以参考MDN的这篇文章 Animatable CSS properties

实例示範

这边先命名一个class为box的div元素

  <div class="container">        <div class="box"></div>    </div>

CSS的部分

橘色就是transition-property(我想改变的属性)，本文以width为例，并设为50px；黄色就是transition-duration(持续时间)，也就是完成动画的时间，这里设为1s。

搭配:hover触发转场效果

.box:hover {            width: 100px;        }

呈现如下:

当滑鼠进入正方形内，width就会从50px变成100px，很神奇吧!

.box内主要就是写变化前的样子(Before)
.box:hover主要就是写变化后的样子(After)

那如果我今天想要把height和background-color也做调整，可以吗?



答案是可以!我们只要调整一下程式码，如下:

↑ 各个转场效果间用「逗号」隔开，并搭配不同的时间差做出更丰富的变化

   .box:hover {            width: 100px;            height: 100px;            background-color: darkblue;        }

呈现如下:

↑ width和height都从50px变成100px，分别持续了1s以及2s；background-color从巧克力色变成蓝色，并持续了3s。

那如果今天我要做的转场效果比较複杂，也是这样一个属性...一个属性...写吗?


答案倒是不一定
我们可以写all(预设)代表全部的属性，但就没有办法为各个属性写duration(持续时间)。

    .box {        background-color: chocolate;        width: 50px;        height: 50px;    }    

若把all改为none，则代表不会有任何转场效果

---

transition-duration

=>持续的时间，也可视为完成转场所需的时间
=>单位可以用秒(s)或毫秒(ms)

一秒就写1s，也可以写小数点，例如0.5s
transition-duration可以参考上面的例子，这里就不另外举例说明了

---

transition-delay

=>延迟的时间，可以是正数、负数、0
=>单位可以用秒(s)或毫秒(ms)

0会马上开始，这也是预设的值
那究竟正数和负数差在哪里呢? 继续沿用刚刚的例子~

我在width新增了一个transition-delay，值为-3s，为了方便比较我把正数的放在下面，滑鼠进入后，专注看宽度的部分就好。

transition-delay为-3s


transition-delay为3s



看出差别了吗??

若transition-delay设为负数，它就会从设定的时间立即开始，-3s就代表从第三秒开始，有点类似快转的感觉；设为正数，就是正常，3s就代表延迟3秒后再开始。

---

transition-timing-function

这个属性应该是transition最有趣的地方了
主要有以下几个值:

linear 等速

ease(预设) 慢➙快➙慢

ease-in 慢进

ease-out 慢出

ease-in-out 慢进慢出

cubic-bezier(p0,p1,p2,p3)贝兹曲线
贝兹曲线是一个连续曲线，由p0,p1,p2,p3四个点组成，如果你有用过Adobe的illustrator/Photoshop中的钢笔工具，那是差不多的东西，另外，其他的timing-function都可以换成贝兹曲线的形式，例如 ease in = cubic-bezier(0.42, 0.0, 1.0, 1.0)

steps( number_of_steps, direction)阶梯函式
第一个参数代表「完成动画的总步数」，须为正整数；第二个参数代表「跳跃时间」(恩..中文翻的不是很好)，有以下几个关键字可使用: jump-start、jump-end、jump-both、jump-none、start(= jump-start )、end(= jump-end ) 、step-end(= steps(1,end) )、step-start(= steps(1,start) )，两个参数中第一个必填，第二个选填(预设是end)，可以做出类似逐格动画，酷毙了

cubic-bezier( )和step( )个人认为比较抽象複杂一点，这里不会多介绍，建议点选上方的连结，可以了解的更深入。

这里以ease-in-out为例，若对其他有兴趣可以点选这个连结，每个属性可以使用一个timing-function，若没特别写就会是ease(预设)。

 .box:hover {            width: 100px;        }

稍微删减了一下程式码，看起来比较清爽ヽ(✿ﾟ▽ﾟ)ノ
呈现效果

滑鼠进入正方形后，它的width就缓慢地从50px变为100px，可以设定其他值感受一下差别

sumary总结

并不是所有css属性都可以做转场效果transition为各个转场属性的速写(shorthand)，一般是写在转场前(Before)的状态中，你也可以写在转场后(After)的状态中，那么回复的状态就会不一样，点我查看。转场效果常会搭配css的:hover或是事件监听一起使用

那CSS Transition的笔记就到这边啰!所学不精，若有解说不够详尽的地方或是错误欢迎指教，感激不尽!

参考文章
MDN-Using_CSS_transitions
W3School-CSS3_transitions
MDN-easing-function