CSS3之动画（animation）_css animation move 250s linear infinite-CSDN博客

本文链接：https://blog.csdn.net/Ivy_Ch/article/details/98624456

本文深入讲解CSS3动画特性，包括如何通过@keyframes定义动画关键帧，实现元素从初始状态到最终状态的变化，以及如何调用动画，设置动画时间、运动曲线等属性，实现复杂动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画(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;
     }
}