Crear animación simple con CSS3

Autor: Alfredo

Comparte

Dale +1

(3 votos.)

Loading ...

Califica

PREGUNTAR

Pregunta

Hola soy Alfredo Puerta Programador Web y autor de NeoPuerta mi Blog sobre programación y diseño. Recientemente lanzando mi nueva web de imágenes graciosas Chinazo.

Este es mi primer articulo, pero claro como escritor de este blog. En esta oportunidad les encellare como hacer una animación (tipo marquee) de forma facil y sencilla con CSS3, ya que es la nueva forma de hacer web HTML5 lo mejor xD!

Bueno comencemos:

1. Primero definimos un nuevo estilo con el nombre de “barra”.

1
2
3
4
5

.barra {
height: 20px;
overflow: hidden;
background-color: blue;
}

height definimos la altura en este caso es de 20px.

overflow sirve para indicarle al navegador qué debe hacer con el contenido que no cupo dentro de una capa, según las dimensiones que se hallan asignado. En nuestro caso es hidden que sirve para indicarle que el contenido que no cupo debe ser recortado.

brackground-color sirve para darle un color de fondo a nuestra animación, yo utilice el azul oscuro “blue”.

2. Segundo paso creamos nuestra animación con el nombre “animacion-texto”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.animacion-texto {
color: white;
-webkit-animation-name: Texto1;
-webkit-animation-duration: 35s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes Texto1 {
from {
margin-left: 100%;
}
to {
margin-left: -150%;
}
}

-webkit-animation-name sirve para definir nuestra animación en nuestro caso es “Texto1”.

-webkit-animation-duration es para definir la duración que durara nuestra animación en pantalla, mi animación dura 35 segundos o también le podemos asignar valores numéricos por ejemplo que la animación se repita 5 veces de hay no mas..

-webkit-animation-iteration-count sirve para indicar cuantas veces sera reproducida nuestra animación, por ejemplo yo utilice el valor “infinite” que le indica al navegador que la animación debe ser reproducida infinitamente.

Con @-webkit-keyframes modificamos la animación “Texto1″ indicandole que el texto debe salir desde la derecha O.o.

3. Tercera parte mostramos nuestra animación con HTML.

1
2
3

<div class="barra">
<div class="animacion-texto">¿Te gusto? Compártelo con tus amigos :)... Realizado por Alfredo Puerta (NeoPuerta). No olvides seguirme en Twitter @neopuerta</div>
</div>

Eso es todo nuestro código completo debería quedarnos así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.barra {
height: 20px;
overflow: hidden;
background-color: blue;
}
.animacion-texto {
color: white;
-webkit-animation-name: Texto1;
-webkit-animation-duration: 35s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes Texto1 {
from {
margin-left: 100%;
}
to {
margin-left: -150%;
}
}

<div class="barra">
<div class="animacion-texto">¿Te gusto? Compártelo con tus amigos :)... Realizado por Alfredo Puerta (NeoPuerta). No olvides seguirme en Twitter @neopuerta</div>
</div>

Espero que te halla sido de ayuda y no olvides de compartirlo con tus amigos!

Recursos relacionados

Comentarios Usando Facebook

Crear animación simple con CSS3 Domingo 29 julio 2012

7 Comentarios + Comentar

hernanmiguel 31 julio, 2012 a las 2:03 AM

hola, una consulta, este codigo, o cualquier otro de css3 o html 5, lo puedo insertar en las paginas de Jimdo, o en cualquier otra, si es asi cómo lo haria, agradezco tu respuesta. Dios te bendiga
- Alfredo 31 julio, 2012 a las 5:49 AM
  
  Hola, Gracias por tu comentario… Si se puede insertar en jimdo y este código ya fue probado en jimdo y funciona perfectamente. Para ingresar el código en jimdo debes ir a Ajustes->Editar head e ingresar el código css y luego donde quieres que aparezca el efecto debes ingresar el código html y listo.
  
  Gracias, Saludo espero que te haya sido de ayuda!
hernanmiguel 3 agosto, 2012 a las 2:34 AM

gracias por la respuesta, mira recien estoy empezando con esto del Jimdo, no se si podrias explicarme un poco mas sobre lo de insertar el codigo CSS3, te agradecere mucho, segui los pasos pero no me sale nada.
Gracias
Alfredo 3 agosto, 2012 a las 4:45 AM

Hola, Que raro te debería de funcionar, debe ser algo que hiciste mal, bueno de igual forma de invito a leer esta entrada haber si te sirve de algo.
http://webmastercv.com/editorial/funcionamiento-de-las-herramientas-de-una-pagina-jimdo.html
posicionamiento web 2 septiembre, 2012 a las 2:45 AM

Wow, incredible blog structure! How long have you been running a blog for? you make running a blog glance easy. The total glance of your site is fantastic, let alone the content!
diseño web madrid 8 septiembre, 2012 a las 3:04 PM

Woah this weblog is fantastic i really like reading your posts. Stay up the good work! You know, lots of people are looking around for this info, you could aid them greatly.
- Alfredo 21 septiembre, 2012 a las 5:53 PM
  
  If you are absolutely right, thanks for your comment!