<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 -- 旋转动画</title>
<style>
.div1 {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 100px auto;
/*动画属性*/
animation: myAnimation 3s; /* 规定在3秒内完成动画 */
animation-iteration-count: infinite; /* 规定动画无限次执行 */
animation-timing-function: linear; /* 规定动画匀速执行 */
}
/* 定义动画如何执行 */
@keyframes myAnimation {
/* 写法1 这种写法只能定义开始和结束时的动画 */
form {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
/* 写法2 还可以定义10%、20%、50%等等规定的时间段执行什么操作 */
/*
0% {
transform: rotate(0deg);
}
30% {}
60% {}
100% {
transform: rotate(360deg);
}
*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>@keyframes规则是创建动画，定义动画什么时候执行什么操作。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。