Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
Curso de Transformaciones y Transiciones en CSS

Clases del Curso de Transformaciones y Transiciones en CSS

Instruido por:
Estefany Aguilar
Estefany Aguilar
Básico
2 horas de contenido
Ver la ruta de aprendizaje
Alicia en Animationland: objetos animados
Proyecto del curso
Alicia en Animationland: objetos animados

Aplica transformaciones y transiciones para darle vida a los objetos de Alicia en Animationland, el maravilloso mundo de fantasías y animaciones web.

Curso de Transformaciones y Transiciones en CSS

Curso de Transformaciones y Transiciones en CSS

Progreso del curso:0/20contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/20contenidos(0%)

Importancia de las animaciones web

Material Thumbnail

5 razones para usar animaciones en la web

05:55 min

Conceptos iniciales

Material Thumbnail

Propiedades para crear animaciones con CSS y propiedades animables

06:29 min

Material Thumbnail

Pseudo-clases y pseudo-elementos en las animaciones

08:52 min

Material Thumbnail

Timing functions, planos y ejes

06:24 min

Transformaciones en 2D y 3D

Material Thumbnail

Transform translate

09:59 min

Material Thumbnail

Transform rotate, scale, skew y matrix

09:43 min

Material Thumbnail

Transform style y perspective

05:28 min

Material Thumbnail

Backface visibility

06:24 min

Parallax con transformaciones

Material Thumbnail

Efecto parallax: estructura HTML

04:21 min

Material Thumbnail

Efecto parallax: estilos CSS

15:09 min

Transiciones

Material Thumbnail

Transition property y duration

11:36 min

Material Thumbnail

Transition timing function y delay

11:07 min

Tips de UX

Material Thumbnail

Movimiento impulsado por la acción

04:13 min

Material Thumbnail

Tiempos de espera

14:12 min

Material Thumbnail

Problemas de parpadeo

05:24 min

Rendimiento y accesibilidad

Propiedades recomendadas y no recomendadas para animar

01:44 min

Material Thumbnail

Aceleración de hardware y la propiedad will-change

08:35 min

Material Thumbnail

Preferencias de movimiento reducido

03:54 min

Libros recomendados y próximos pasos

Material Thumbnail

Continúa en el Curso de Animaciones con CSS

01:31 min

nuevosmás votadossin responder
Laura Fernanda Martínez Ballesteros
Laura Fernanda Martínez Ballesteros
Estudiante

como descargo el tema synthwave '84 en mi computador ?

1
matias bravo
matias bravo
Estudiante

siento que solo repeti el codigo, pero no entiendo que es lo que realmente genera la ilusion de moverse a velocidades diferentes…

por que la card se mueve mas rapido que el fondo?
que es lo que genera eso?

3
matias bravo
matias bravo
Estudiante

no entiendo cual es la funcion de

transform-style: preserve-3d; 
    }

ya que genera una especie de glith y la animacion no se ve fluida, en cambio si la quito, si se ve fluida…

alguien sabe por que puede ocurrir? Saludos

3
Eduardo
Eduardo
Estudiante

El transform que puso en .image, me parece o es innecesario? Por favor no me quedó claro para que sirve si es necesario.

1
Víctor Hugo Torres Fierro
Víctor Hugo Torres Fierro
Estudiante

Hola,

¿Cómo insertan los GIFs en los mensajes?

Gracias por su ayuda.
Saludos.

1
axlina90
axlina90
Estudiante

Saludos, excelente clases pero me surgio una duda, porque el backface-visibility se le debe aplicar a la clase face y no a la clase .front?

1
Irving Juárez
Irving Juárez
Estudiante

Tengo curiosidad. Dicen que antes había otros cursos de animaciones con el ex-maestro (todos saben quien es).
.
Que tan buenos eran los otros cursos? Yo no pude tomar ninguno de ellos

2
Gustavo Isaac Gomez Quintanilla
Gustavo Isaac Gomez Quintanilla
Estudiante
Sin título1.png

En el navegador me aparecen solo la mitad de las imágenes y no entiendo el por que:(

1
Christian Erik Velázquez
Christian Erik Velázquez
Estudiante

Éste método aplica para el tema de accesibilidad Web ?

1
Giovanny Moreno Leguizamón
Giovanny Moreno Leguizamón
Estudiante

no entiendo por que usa -20px si dice que es en el eje Y hacia arriba

1