11. Animaciones con keyframes | Curso de CSS3

En este tutorial vamos a aprender a hacer animaciones con keyframes en CSS3, para hacer una serie de transiciones de acuerdo a tiempo, y porcentajes de animación
========================================
Suscríbete al canal bit.ly/RUclips-...
=========================================
Descarga los archivos del tutorial:
bit.ly/MRR-Gith...
Síguenos en las redes sociales:
Blog: www.vidamrr.com
Facebook: / vidamrr
Twitter: / vidamrr
----------------------------------------------------------------------------------------------------
Más cursos dentro del canal:
Curso de PHP + MySQL bit.ly/mrr-curs...
Curso básico de CSS: bit.ly/curso-cs...
Diseño elementos con CSS bit.ly/componen...
Mi primer sitio web con CSS: bit.ly/primer-s...
Curso avanzado de CSS3: bit.ly/curso-css3
Curso de jQuery: bit.ly/mrr-curs...
Portafolio web con jQuery: bit.ly/portafol...
Sitio web dinámico con jQuery bit.ly/sitio-di...
Tutoriales Photoshop bit.ly/mrr-tuto...

[@malenadelgado5403]

Está bueno! Pero en realidad cuando la tierra vuelve por detrás del sol, no debería oscurecerse.

[@andymaths]

Pensé que yo era el único que se dio cuenta xd
La forma de solucionarlo es sencillamente acomodar la animacion de sombra asi:
@keyframes sombra{
50% {opacity: 1;}
75% {opacity: 0;}
100%{opacity: 1;}
}
y agregar el infinite en #img-tierra para que se siga repitiendo la animacion, de otra forma, solamente se pondra la sombra una vez y en las demas vueltas no lo hará:
#img-tierra{
animation-name: sombra;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Un poco tarde, pero espero le sirva a quienes vean esto en un futuro xd

[@hectorvargas5628]

porque el enlace de Curso avanzado de CSS3 redirige a un video random de YT

[@victorizquierdo5320]

Muchas gracias, recién estoy comenzando un bootcamp de fullstack y tus videos me son de gran utilidad.

[@andresmarcano15]

Quedo muy bueno, el Z-index lo sustituí por un transformZ(-X) y le da profundidad. Suscrito.

[@odeditando.k]

El único vídeo que sí entendí, gracias amigo 😸

[@slaveofthecode]

Muy bueno!, y muy buen explicado. Te feliicito! :)

[@vidamrr]

Gracias Gus!

[@edgarvargas2397]

Muy sencillo, pero se ve espectacular

[@angelleyton5091]

a mi la verdad no me funciona ni el principio del codigo
width:"400" esto me lo marca como error en el html las imagenes aun siguen del tamaño original aun no se que pasa

[@AnaAlvarez-ob9rg]

te falta el px, es width: 400 px;

[@brianOE]

Buen video 👋🏼

[@broderson6204]

Buen efecto!

[@theloniousmonk81]

Ex elente

[@francosql]

Muy buen video...

[@vidamrr]

Muchas gracias Mr. Chutte

[@goklooz26]

Maravilloso.