<html>
<head>
<style>
div {
width: 224px;
height: 189px;
background: url('unoWilder.jpg');
position: relative;
-webkit-animation: animaWilder 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: animaWilder 5s linear 2s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animaWilder {
0% { left:0px; top:0px; width:100px;height:100px;}
25% { left:300px; top:0px; width:120px;height:110px;}
50% { left:300px; top:300px;width:140px;height:120px;}
75% { left:0px; top:300px;width:160px;height:130px;}
100% { left:0px; top:0px;width:190px;height:140px;}
}
/* Standard syntax */
@keyframes animaWilder {
0% { left:0px; top:0px; width:100px;height:100px;}
25% { left:300px; top:0px; width:120px;height:110px;}
50% { left:300px; top:300px;width:140px;height:120px;}
75% { left:0px; top:300px;width:160px;height:130px;}
100% { left:0px; top:0px;width:190px;height:140px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
No hay comentarios:
Publicar un comentario