CSS3之动画（animation）

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

1.调用
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

2.声明
@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

可以使用from to

也可以使用 0%~100% 来调整动画变化 

下图来自w3c截图（https://www.w3school.com.cn/index.html）

 

div {
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	left: 0;
	/*调用动画*/
	/*animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;*/
	animation: move 2s ease 0s infinite alternate;
	-webkit-animation: move 2s ease 0s infinite alternate;
}

/*声明动画  关键帧  @keyframes 动画名称 {  }  */
@keyframes move  {
     from {
	    left: 0;
	    background-color: pink;
      }
      to {
		left: 1000px;
		background-color: yellow;
      }
}
@-webkit-keyframes move  {
      from {
		left: 0;
		background-color: pink;
      }
      to {
		left: 1000px;
		background-color: yellow;
      }
}
@-ms-keyframes move  {
     from {
		left: 0;
		background-color: pink;
      }
      to {
		left: 1000px;
		background-color: yellow;
     }
}