JMiur [E]

Las animaciones con CSS parecen engorrosas porque son engorrosas; no es que sean tan difíciles como parecen sino que se nos complica usarlas por dos motivos, constantemente aparecen nuevas propiedades y , sobre todo, para usarlas, deben multiplicarse las reglas porque cada navegador requiere que se escriban las reglas incluyendo su prefijo y eso hace que una cosa que debería ser simple, se transforme en una larga lista que nos asusta.

De nada sirve quejarse, es lo que hay ... por ahora.

Si vamos a utilizarlas o queremos experimentar con ellas, animate.css es una buena ayuda porque allí, han resumido una larga lista de reglas estilos con un surtido enorme de animaciones que pueden usarse en los navegadores que las comprenden (Firefox, Chrome, Safari, Opera, IE10) y que no tendrán efecto en el resto.

Las animaciones pueden ser descargadas en conjunto o seleccionar sólo algunas y lo que obtendremos en un archivo de extensión CSS que podemos abrir con el block de notas y copiar y pegar en nuestra plantilla junto con el resto de las reglas de estilo o entre etiquetas <style> </style>..

Acá hay unos pocos ejemplos; coloco un HTML como este:
<div id="ejemploANI">
... un contenido cualquiera ...
</div>
Y le pondré propiedades de estilo para que quede fijo:
#ejemploANI {
  left: 50%;
  margin-left: -320px;
  opacity:0; /* lo mantengo oculto */
  position: fixed;
  top: 200px;
  width: 400px;
  z-index: 1000;
  /* y cualquier propiedad gráfica */
  background-color: #445566;
  border-radius: 50px;
  box-shadow: 0 0 10px #ABC inset;
  color: #FFF;
  font-size: 20px;
  padding: 20px 0;
  text-align: center;
  /* las reglas genericas de la animación */
  -moz-animation-fill-mode: both; -moz-animation-duration: 1s;  /* Firefox */
  -webkit-animation-fill-mode: both; -webkit-animation-duration: 1s;  /* Chrome/Safari */
  -o-animation-fill-mode: both; -o-animation-duration: 1s;  /* Opera */
  -ms-animation-fill-mode: both; -ms-animation-duration: 1s;  /* IE10 */
  animation-fill-mode: both; animation-duration: 1s; /* w3.org */
}
Ahora, nos faltarían las animaciones; en este caso solo uso cuatro:

lightSpeedIn hará que el DIV aparezca de derecha a izquierda y lightSpeedOut hará que "se vaya" en al misma dirección; para eso, bastaría agregarle la clase al DIV:
<div id="ejemploANI" class="lightSpeedIn"">
o bien
<div id="ejemploANI" class="lightSpeedOut">
¿Cómo hacer eso? Dependerá del uso que queramos darle; por ejemplo, podemos hacer que aparezca y desaparezca haciendo click en alguna parte:
<a href="javascript:void(0);" onclick="document.getElementById('ejemploANI').className = 'NOMBRE_CLASE'> click acá </a>

¿Y el CSS de la animación? Sólo uno a manera de ejemplo.

@-moz-keyframes lightSpeedIn {
  0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-webkit-keyframes lightSpeedIn {
  0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@-o-keyframes lightSpeedIn {
  0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedIn {
  0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
  60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
  80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
  100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
  -moz-animation-name: lightSpeedIn; -moz-animation-timing-function: ease-out;
  -webkit-animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out;
  -o-animation-name: lightSpeedIn; -o-animation-timing-function: ease-out;
  animation-name: lightSpeedIn; animation-timing-function: ease-out;
}
Buenos dias, tardes, noches ...

7 comentarios:

Gem@  

Que originales esos efectos ¿te imaginas escribir un post y cuando decimos "ver código" que en lugar de desplegarse aparezca el código como un bólido de carreras? :D !alucinante!

JMiur  

No se me había ocurrido pero sería muy interesante ... o divertido ¿verdad? :D

Responder
Ghllee  

Muy buenos, ¡te puedo hacer una pregunta? Quisiera saber cuando tiempo lleva mi blog en linea. Es decir la fecha en la que estuvo por primera vez en la red. Es que mi primer entrada fue eliminada, por que en ese entonces creía que tenia un limite de entradas, por lo que según mis estadísticas en blogger, mi sitio comienza a contar mis visitas por allá en el mes de mayo del 2008, pero no estoy seguro de que fecha, quiero hacer un aniversario es por eso que estoy buscando esto. Hay alguna manera de saberlo?

JMiur  

No sé, puede ser que la información esté en tu perfil aunque por lo que recuerdo, allí sólo se indica el mes y el año.

Ghllee  

Pero ahí indica desde hace cuanto poseo mi cuenta de blogger, o sea que no es lo que estoy buscando. La verdad no se como averiguar esta fecha, ya que ni en los feeds de mi sitio aparece la primer entrada.

JMiur  

Si has eliminado esa primera entrada, no estará en los feeds.

Responder
Matias Salinas  

excelente, te felicito por tu blog, siempre busco cosas acá para aplicarlas en mi blog http://rechiquen.com/ :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR