elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [CSS] Animación pre hecha. ¿Donde la pongo?.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [CSS] Animación pre hecha. ¿Donde la pongo?.  (Leído 2,478 veces)
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
[CSS] Animación pre hecha. ¿Donde la pongo?.
« 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:
Código
  1. .classname {
  2. -webkit-animation: cssAnimation 1s 16 ease;
  3. -moz-animation: cssAnimation 1s 16 ease;
  4. -o-animation: cssAnimation 1s 16 ease;
  5. }
  6. @-webkit-keyframes cssAnimation {
  7. from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  8. to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  9. }
  10. @-moz-keyframes cssAnimation {
  11. from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  12. to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  13. }
  14. @-o-keyframes cssAnimation {
  15. from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  16. to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  17. }

¿Se tendría que meter aquí?:
Código
  1. <STYLE type="text/css">
  2.  
  3. </STYLE>

Una vez puesto donde se tuviera que poner, ¿Como lo acciono?.





Un saludo y gracias por leer!!


En línea


Shell Root
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.724


<3


Ver Perfil WWW
Re: [CSS] Animación pre hecha. ¿Donde la pongo?.
« Respuesta #1 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:

Código
  1. <pre class = 'classname'>...</pre>


En línea

Te vendería mi talento por poder dormir tranquilo.
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: [CSS] Animación pre hecha. ¿Donde la pongo?.
« Respuesta #2 en: 3 Enero 2013, 14:50 pm »

Gracias por esto, me imaginaba que se tendría que poner lo de
Código
  1. class = 'classname'
Pero no me imaginaba donde.


Entonces quedaría así?:
Código
  1. <!Doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <script type="text/css">
  6. <pre class = 'classname'>
  7. .classname {
  8. -webkit-animation: cssAnimation 1s 16 ease;
  9. -moz-animation: cssAnimation 1s 16 ease;
  10. -o-animation: cssAnimation 1s 16 ease;
  11. }
  12. @-webkit-keyframes cssAnimation {
  13. from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  14. to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  15. }
  16. @-moz-keyframes cssAnimation {
  17. from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  18. to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  19. }
  20. @-o-keyframes cssAnimation {
  21. from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
  22. to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
  23. }
  24. </pre>
  25. </script>
  26. <body>
  27. </body>
  28. </html>


Y después como lo llamo para que haga el efecto?
Asi o algo parecido?

Código
  1. <body>
  2. <INPUT TYPE="button" VALUE="girar" class='classname'>
  3. </body>
  4.  
« Última modificación: 4 Enero 2013, 19:08 pm por Ori-chan » En línea


Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Hacking macosX? donde lo pongo?
Sugerencias y dudas sobre el Foro
T0rete 2 2,235 Último mensaje 24 Enero 2006, 06:23 am
por aNexos
Donde los pongo?
Java
mecosecho 1 2,212 Último mensaje 20 Agosto 2009, 21:35 pm
por Debci
Donde Pongo Una Descripcion Del Foro? SMF
Desarrollo Web
TranceMaster 4 3,485 Último mensaje 10 Enero 2012, 20:21 pm
por TranceMaster
¿Cómo exportar una animación hecha en una página web?
Programación General
big_ed 8 5,334 Último mensaje 27 Julio 2019, 19:22 pm
por big_ed
donde pongo sda2/EFI/ubuntu/shim64.efi « 1 2 »
GNU/Linux
Abcita 14 13,973 Último mensaje 8 Agosto 2020, 22:19 pm
por Abcita
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines