让它旋转！

Coddy CSS 项目：简单的加载动画课程的第 4 课，共 6 课。

要仅使用 CSS 创建动画，我们会使用 keyframes，语法如下：

@keyframes animation_name {
	from {
		...
	}
	to {
		...
	}
}

注意，animation_name 是动画的名称（可以更改）。在 from 和 to 代码块中，你应该设置 CSS 属性的变化，例如：

@keyframes fade_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

上面的代码会让动画的透明度从 1 变为 0。

例如，要将上面的动画添加到特定元素，可以这样写：

#spinner {
	animation: fade_out 1.3s infinite;
}

上面的代码会为 #spinner 元素添加 fade_out 动画，时长为 1.3 秒，并且会无限次运行。

挑战

简单

使用 keyframes 为 #spinner 添加旋转动画。

动画应持续 1.5 秒，并无限次播放。

动画名称可以任意选择

如果你不确定如何制作旋转动画，可以查看提示。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

CSS 项目：简单的加载动画中的所有课

1简介

2CSS 项目

让它旋转！