Estaba toqueteando el http://www.css3maker.com/index.html cuando encontré la opción de animación. Hice algunas cosas y me salió esto:
.classname {
-webkit-animation: cssAnimation 1s 16 ease;
-moz-animation: cssAnimation 1s 16 ease;
-o-animation: cssAnimation 1s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
¿Se tendría que meter aquí?:
<STYLE type="text/css">
</STYLE>
Una vez puesto donde se tuviera que poner, ¿Como lo acciono?.
Un saludo y gracias por leer!!
Se pondría entre las etiquetas <SCRIPT> el código css, pero para ponerlo a funcionar debería de crear un "objeto", y agregarle la clase .classname{}, es decir:
<pre class = 'classname'>...</pre>
Gracias por esto, me imaginaba que se tendría que poner lo de class = 'classname' Pero no me imaginaba donde.
Entonces quedaría así?:
<!Doctype html>
<html>
<head>
</head>
<script type="text/css">
<pre class = 'classname'>
.classname {
-webkit-animation: cssAnimation 1s 16 ease;
-moz-animation: cssAnimation 1s 16 ease;
-o-animation: cssAnimation 1s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</pre>
</script>
<body>
</body>
</html>
Y después como lo llamo para que haga el efecto?
Asi o algo parecido?
<body>
<INPUT TYPE="button" VALUE="girar" class='classname'>
</body>