CSS微动画 - 先了解将使用的属性是很重要的！transform & transition

Q: 不会设计怎麽办？
A: 小编也不会设计，但可以把别人的设计变成网页！

本篇开始将使用transform跟transition属性做微动画，透过操控这两个属性，除了可以让元素在状态间有渐变的效果外，还可以对元素做位移、旋转、放大缩小等效果。让我们先来了解这两个属性吧！

「工欲善其事，必先利其器」

transform

这个属性操控元素的变形，预设以元素的正中心为轴点，有许多值可以设定，以下来介绍之後会用到的值～
（如後续文章有使用其他值，会再补充）

• rotate

  • 代表元素本身旋转的角度。顺时针旋转。

• scale

  • 代表元素的大小比例。

• translate

  • 让元素位移，使用上通常提供两个参数。第一个参数为x轴的位移；第二个参数为y轴的位移。

• translateX

  • 让元素以x轴方向位移。

• translateY

  • 让元素以y轴方向位移。

transition

• 控制的是元素在状态间的渐变，而单单一个 transition 其实是多个属性的简写。

transition-property

• 这个属性代表着「哪个属性」要有渐变的效果。
• 若要所有属性都有渐变效果，这个值可以设置为 all 。

.example {
  transition-property: height;
}
/* 代表`height`改变时会有渐变效果，若`width`有变化则不会渐变。 */

transition-duration

• 代表着渐变的时间是多少。
• 以秒为单位如：2s、0.3s，亦可使用毫秒如：250ms。

transition-timing-function

• 这个属性代表着渐变期间的速度。
• 预设为ease，这个属性的依据是贝兹曲线。

transition-delay

• 代表着元素渐变前延迟的时间。
• 以秒为单位可以下作1.5s、0.8s，亦可使用毫秒如：75ms。