<!DOCTYPE html>
<html>
<head>
<style>
#krug {
position: absolute;
top: 200px;
left: 250px;
width: 200px;
height: 200px;
border-radius: 100%;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 2s;
animation-name: example;
animation-duration: 2s;
= }
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:250px; top:200px;}
25% {background-color:yellow; left:250px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<svg width="250" height="250" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" fill="RED">TEXT</text>
<animate attributeName="fill" from="black" to="blue" dur="10s" fill="freeze" />
<animateTransform attributeType="xml"
3
attributeName="transform"
4
type="rotate"
5
from="0 0 0"
6
to="360 0 0"
7
dur="10s"
8
repeatCount="1"/>
</svg>
<div id="krug" onclick="obrni()"></div>
<script type="text/javascript">
function obrni(){
document.getElementById("krug").className ="krug";
}
</script>
</body>
</html>
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace