持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

上一篇大致列了常用的几种动画方式，这一次来学习一下我们常用的一个动画css动画。css动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。要创建 CSS 动画，首先我们需要了解 @keyframes 规则，@keyframes 规则是用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧。

keyframes

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

	 @keyframes jump {
	            from { bottom: 10rpx; }
	            to { bottom: 2rpx }
	        }

最重要的是我们需要设置动画的名字@keyframes 动画名字，里面有from 属性 to 属性，from里面就是可以编写对应的css属性，简单理解就是从什么属性变到什么属性，来达到一个变化的效果。接下来我们可以在对应的元素样式里面加上这个动画

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这是给一个div标签加上动画，animation-name 写我们定义好的动画名字。

animation-duration 意思是这个动画持续多久。

animation-iteration-count：infinite 意思是让这个动画一直反复进行，就是不断循环。

下面列举所有属性的含义

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

点击动画

下面看一个手势不断点击的效果，这个手势就是利用css动画实现

	transition: all 1s;
	animation: jump .2s ease-in-out infinite alternate;

动画就是上面定义的jump动画，在需要的对应标签样式里加上这2个属性，就能做到反复点击的效果。

总结

css动画还是相对简单实用，具体的效果可以结合各种属性，配合我们的业务逻辑来实现，应该也可以满足大部分需求。

css之动画学习（二）

前言

keyframes

点击动画

总结