CSS微动画 - 了解Animation并做出更多效果吧！

Q: 是时候表演真正的技术了？
A: 要动起来是少不了animation属性的！

本篇开始将使用animation属性做微动画，别於transition是在样式间转换的渐变，animation可以做到比较复杂的变化，并且透过属性的调整，可以选定动画演绎的次数、阶段样式等等，跟transition相比可以做出更多样化的动态效果。

要先了解属性！

animation

• 这个属性是多个属性的简写版本。

animation-name

• 顾名思义是定义动画的名称，这个属性设定元素要演绎哪个脚本动画，而脚本动画会以影格（@keyframes）方式撰写。

animation-delay

• 演绎动画前延迟的时间。

animation-duration

• 动画演绎的时间。

animation-iteration-count

• 这个属性的设定代表动画会播放的次数。
• 预设值为 1 ，可设定的值为 0 (含)以上的正整数或是infinite代表无限。

animation-timing-function

• 动画播放的速度曲线。
• 预设值为 ease，速度会从一开始慢到中间时加速，最後再变慢。

animation-play-state

• 这个属性操控动画是否播放。
• 预设值为running，也可以设置为pause可以让动画暂停。

animation-direction

• 动画在演绎後是否反向演绎。
• 预设值为normal代表动画演绎後将从头开始演绎。

animation-fill-mode

• 该属性定义动画没有在演绎时的样式，预设为none代表如果动画演绎前或是演绎完後，元素都会显示原本的样式。
• 如果希望动画演绎前後可以以animation内影格的样式影响元素，可以使用该元素设定。

@keyframes

• 上述有提到@keyframes，@keyframes定义了动画的脚本，每段动画到什麽阶段要演绎什麽，皆设定在@keyframes内。
• @keyframes的写法分为两种：
  • % ：可以从0%设置到100%。
  • from(等於0%)、to(等於100%)。

以下来个小小范例，下一篇就要进入重点了！

<style>
  .block {
    width: 300px;
    height: 60px;
    background-color: blueviolet;
    animation: fadeInOut 3s infinite;
  }

  @keyframes fadeInOut {
    0% {
      opacity: 0
    }
    50% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }
</style>

<div class="block"></div>

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！