Untitled

<!DOCTYPE html>
<HTML>
<HEAD>
<STYLE type="text/css">
.kvadratas {
width: 150px;
height: 150px;
background: green;
position: absolute;
margin-left: 100px;
margin-top: 100px;
border: solid 1px black;
text-align: center;
}

.kvadratas {
animation-name: growAndGlow;
animation-duration: 10s;
animation-delay: 5s;
-webkit-animation-name: growAndGlow;
-webkit-animation-duration: 10s;
-webkit-animation-delay: 5s;
-moz-animation-name: growAndGlow;
-moz-animation-duration: 10s;
-moz-animation-delay: 5s;
-o-animation-name: growAndGlow;
-o-animation-duration: 10s;
-o-animation-delay: 5s;


margin-top: 100px;
margin-left: 100px;
background-color: yellow;

margin-top: 100px;
margin-left: 1000px;
transform: scale(0.5);
background-color: blue;

margin-top: 500px;
margin-left: 1000px;
transform:scale(1);
background-color: purple;


margin-top: 500px;
margin-left: 100px;
transform:scale(1.5);
background-color: red;


margin-top: 100px;
margin-left: 100px;
transform: scale(1);
background-color: orange;


}
</STYLE>
</HEAD>
<BODY>
<DIV class="kvadratas">
<h4>CSS3 animacija</h4>
</DIV>
</BODY>
</HTML>