网站制作中的CSS动画

网站制作中动画效果是吸引用户的重要方式之一，而CSS动画是一种无需借助JS就能添加动画效果的方法。

在CSS中使用@keyframes来制作动画效果，来改变元素当前的样式。通过animation来为不同的元素设置@keyframes的动画。

在@keyframes中可以通过from和to或百分比来设置元素如何变化，在需要动画效果的元素中通过animation-name来确定是那个@keyframes设置的动画，使用animation-duration来设置动画完成的周期为多长时间，通过animation-timing-function来设定动画的运行速度，animation-delay来设置动画何时开始默认为0，animation-iteration-count来规定动画的时间默认为1，通常使用infinite表示无限次，animation-direction表示动画结束后下一次反方向播放默认为normal，可以设置为alternate表示下一次反方向播放，animation-play-state表示动画是否运行默认running，可以通过JS设置成paused表示动画暂停。通常情况下我们会使用animation来简写。