CSS旋转动画关键帧

Question

我正在做CSS加载程序，想了解@keyframes中的内容。

我看到当滑块从一种状态转换为另一种时，它们使用{from，To}，而其他人则使用{0％，100％}。两者在创建加载程序时都有什么区别，但是当我使用其中之一时，什么时候不使用。

从开头到示例

@keyframes example {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(359deg);
		}
}

0％，示例为100％

@keyframes example {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

Answer 1

如MDN documentation中所述：

  

来自

     

起始偏移量为 0％。

     

至

     

结束偏移量为 100％。

---

来自specification：

  

关键字 from等于值0％。关键字 to是   等于值100％。