CSS就可以！animation 与他的好夥伴 @keyframes

如果说HTML是网页开发的第一堂课，CSS差不多就会再第二堂课出现了，好消息是，只要用第二堂学到的语法，就可以制作 Web Motion 啦！
而且若真的要细谈效能的话，CSS这边能把效果写出来、符合开发情境与需求 (浏览器支援度问题等)，那基本上就使用CSS这边写就是相当合适的选择。

接下来就直接进入正题
CSS动画基本架构：animation 与他的好夥伴 @keyframes

.my-div{
animation: my-animation 3s;
}
@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

第一步、keyframes给个名字，定义至少两个关键影格状态
keyframe用@标签开头，後面带上一个命名，里面设定动画渐变过程中的「关键影格」，关键影格之间有状态数值的差异，加上时间即可构成「动」的变化。

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

这边至少要有起点与终点的两个状态，当然也可以加上速率的差异，例如上方的范例，从不透明度为0开始 (就是完全透明的状态)，到终点是完全不透明，如果是没有加上速度相关控制，在最中间的50%时，opacity也会来到0.5，如果希望是带有先快後慢的效果，可以在50%的时候增加设定(当然可以把opacity:0.5设定在50%之前也可以，程序写法很自由的~)

@keyframes my-animation-two{
  0%{
      opacity:0;
    }
    50%{
      opacity:0.8;  
    }
  100%{
      opacity:1;
    }
}

第二步、把keyframes动画利用animation加到网页里
利用「animation」即可把刚刚定义好的 keyframes 加进指定的网页元件中，如之前提到「时间」是Motion的灵魂元素，因此这边除了需要放入keyframes名字，也须把持续多久的时间加进：

.my-div{
animation: my-animation 3s;
}

keyframes可以设定很多个，若希望在使用两个keyframes特效，可以用逗号隔开：

.my-div{
animation: my-animation 3s, my-animation-two 3s;
}