Day18 用CSS做出动画效果

还没学到这个属性之前，一直以为必须使用到JavaScript，才能让网页有动画的效果，没想到用CSS也可以做出动画的效果。只要会运用transition和animation这两个CSS属性，就可以产生很多不同的动画效果了。
因为transition比起animation用法比较好理解，且部分属性概念有重叠，所以就着重於整理比较容易忘记的animation属性笔记。

Animation 属性

animation 属性是以下几个属性的缩写:

• animation-name 动画名称
• animation-duration 动画播放时间
• animation-delay 动画延迟播放时间
• animation-iteration-count 动画播放次数
• animation-fill-mode 设定最终停留位置
• animation-direction 动画播放方向
• animation-play-state 动画播放或暂停状态
• animation-timing-function 动画加速度函式

CSS Animation 语法

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

animation-name 命名时要注意的事

• animation-name 属性是用来指定一个或多个@keyframes所使用的动画名称，如果没有设定animation-name，就不会产生出动画效果。
• initial 和 None是CSS动画的保留字，不能使用这两个字作为动画名称。

div {
  animation-name: move;
}

相关资料: 4.2. The animation-name property

animation-duration 动画播放时间设定

animation-duration 指的是「播放一次」动画需要的时间，单位为 秒 ( s ) 或毫秒 ( ms )，预设值 0s，如果没有设定或将其设为 0s，就不会播放动画，基本上和 animation-name 动画名称都是属於一定要有的属性。

div {
  animation-duration: 5s;
}

animation-delay 动画延迟播放时间

设定动画开始之後延迟的时间
比较少会使用到，通常用在设定了有很多动画效果的时候
例如:
动画在两秒後才会开始执行

animation-delay: 2s;

如果延迟播放时间是负数，例如 -1s、-2s，效果会从延迟变成快转，假设动画播放时间是设定 5 秒，animation-delay 设定为 -2s，动画就会从第二秒开始播放，播放三秒後结束。

animation-iteration-count 动画播放次数

预设是 1，也可以设定成infinite(无限次执行)。
但如果设定成infinite，会建议设置在比较小的区块，避免吃效能

例如:

设定动画只会播放两次

div {
  animation-iteration-count: 2;
}

animation-fill-mode 设定动画最终停留位置

• animation-fill-mode: none; 预设值，不论动画播放次数，结束後一律返回原始状态。
• animation-fill-mode: forwards; 停留在最後的一个位置
• animation-fill-mode: backwards; 停留在起始位置
• animation-fill-mode: both; 此设定值会依照动画播放次数或是播放方向，停留在起始位置或最後位置

animation-direction 动画播放方向

animation-direction 属性定义动画是正常播放、倒转播放或是其它方式

• normal：正常播放
• reverse：倒转播放
• alternate：正反转轮流播放，如果动画播放次数是预设就只会正常播放。
• alternate-reverse：alternate 的相反

例如:
设定先正常播放，後倒转播放

div {
  animation-direction: alternate;
}

animation-play-state 动画播放或暂停状态

• animation-play-state:running; 预设值，表示动画正常执行。可搭配滑鼠 hover 的效果使用
• animation-play-state:paused; 设定动画暂停。

animation-timing-function 设定动画播放的速度曲线

• animation-timing-function:ease; 预设是ease 从慢到快 最後会是慢速结束
• animation-timing-function:ease-in; 从慢到快
• animation-timing-function:ease-out; 从快到慢
• `animation-timing-function: linear; 从开始到结束速度都一致
  ...其它设定值可以参考 CSS animation-timing-function Property

制作动画必备的@keyframes(关键影格)

animation属性会搭配@keyframes一起使用来产生动画效果

例如:

范例一

div{
width:100px; 
height:50px; 
background-color: red; 
animation-name: example; 
animation-duration: 3s; 
position:relative; 

@keyframes example {
  from{ 
  background-color: red;  left:0px; top:0px; 
  }
  to {
  background-color: blue; left:0px; top:0px; 
  }
}

范例二

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

@keyframes 语法

@keyframes animationName {
  keyframes-selector {
    /* css-styles */
  }
}

用from / 0% 表示动画的起始，to / 100% 表示动画的结束

好用的动画套件

• Animate.css
• AOS

参考资料:
完整解析 CSS 动画 ( CSS Animation ), 理解animation-fill-mode属性, Day27：小事之 Transition 与 Animation

以上为个人学习笔记整理
若有错误，欢迎指正