<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<!--<link rel="stylesheet" href="css/animate.min.css">-->
<style>
@-webkit-keyframes myFrameClass {
0% {
-webkit-transform: rotate3d(0, 1, 0, -360deg);
transform: rotate3d(0, 1, 0, -360deg);
}
50% {
-webkit-transform: rotate3d(0, 1, 0, 0deg);
transform: rotate3d(0, 1, 0, -180deg);
}
100% {
-webkit-transform: rotate3d(0, 1, 0, 360deg);
transform: rotate3d(0, 1, 0, -0deg);
}
}
@keyframes myFrameClass {
0% {
-webkit-transform: rotate3d(0, 1, 0, -360deg);
transform: rotate3d(0, 1, 0, -360deg);
}
50% {
-webkit-transform: rotate3d(0, 1, 0, -0deg);
transform: rotate3d(0, 1, 0, -180deg);
}
100% {
-webkit-transform: rotate3d(0, 1, 0, -360deg);
transform: rotate3d(0, 1, 0, -0deg);
}
}
.myFrameClass {
-webkit-animation-name: myFrameClass;
animation-name: myFrameClass;
}
#d1{
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count:3;
animation-iteration-count:3;
}
</style>
</head>
<body>
<div id="d1" style="width: 10vw;height: 10vw; background-color: yellow; -moz-border-radius: 10vw;-webkit-border-radius: 10vw;"/>
<script>
$("#d1").addClass('myFrameClass');
</script>
</body>
</html>
