<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
animation: 动画名称 时间 方式 延时 动画次数 动画方向
animation: donghua 3s linear 0.5s infinite reverse;
*/
#demo{
width: 300px;
height: 40px;
background-color: skyblue;
margin: 300px auto;
animation:xuanzhuan 3s linear 0.5s infinite normal;
/* animation-name:xuanzhuan;
animation-duration: 3s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-delay:3s;
animation-direction:alternate; */
}
#demo:hover{
animation-play-state:paused
}
@keyframes xuanzhuan{
/* from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
} */
0%{
transform: rotate(0deg);
}
25%{
background-color: red;
}
50%{
opacity: 0.6;
}
75%{
border-radius: 10px;
opacity: 0.4;
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="demo">动画</div>
</body>
</html>
