Título: [CSS] Animación pre hecha. ¿Donde la pongo?.
Publicado por: Ori-chan en 1 Enero 2013, 02:14 am
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!!
Título: Re: [CSS] Animación pre hecha. ¿Donde la pongo?.
Publicado por: Shell Root en 2 Enero 2013, 04:35 am
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>
Título: Re: [CSS] Animación pre hecha. ¿Donde la pongo?.
Publicado por: Ori-chan en 3 Enero 2013, 14:50 pm
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>
|