CSS3动画无限次执行实例@慕课网原创_慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
@-webkit-keyframes gogogo {
0%{

    -webkit-transform: rotate(0deg);
   border:5px solid red;

}
50%{
    -webkit-transform: rotate(180deg);
    background:black;
   border:5px solid yellow;
}
100%{
    -webkit-transform: rotate(360deg);
    background:white;
   border:5px solid red;
}

}

.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;

}
</style>
<body>
<div class="loading"></div>
</body>
</html>