[CSS] Animación pre hecha. ¿Donde la pongo?.

Iniciado por Ori-chan, 1 Enero 2013, 02:14 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Ori-chan

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 (lenguage) [Seleccionar]

.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í?:
Código (lenguage) [Seleccionar]

<STYLE type="text/css">

</STYLE>

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





Un saludo y gracias por leer!!

Shell Root

#1
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 (html4strict) [Seleccionar]
<pre class = 'classname'>...</pre>
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

Ori-chan

#2
3 Enero 2013, 14:50 PM Ultima modificación: 4 Enero 2013, 19:08 PM por Ori-chan
Gracias por esto, me imaginaba que se tendría que poner lo de
Código (lenguage) [Seleccionar]
class = 'classname' Pero no me imaginaba donde.


Entonces quedaría así?:
Código (lenguaje) [Seleccionar]
<!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?

Código (lenguaje) [Seleccionar]

<body>
<INPUT TYPE="button" VALUE="girar" class='classname'>
</body>

Imprimir
Ir Arriba Páginas1
Acciones del Usuario