programmer/rotateCssAnimation.html at master · engineerahkhani/programmer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>

<style>
#rotate {
    width: 100px;
    height: 100px;
	border-radius:100%;
    background-color: green;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 10s ;

	animation-iteration-count: infinite;
}


@keyframes example {
    0%   { left:0px; top:0px;}
    25%  { left:200px; top:0px;}
    50%  { left:200px; top:200px;}
    75%  { left:0px; top:200px;}
    100% {left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="rotate"></div>
<style type="text/javascript">
</style>

<script src="javascript/jquery-1.9.1.min.js"></script>
<script>

</script>
</body>
</html>