Propiedades para crear animaciones con CSS y propiedades animables

2/20
Recursos
Transcripción

Al principio de nuestra historia, Alicia cae en una cueva dirigiéndose un salón donde observa una bebida con una frase: “Bébeme”. Esta bebida provoca que Alicia disminuya su estatura para que pueda accede al mundo de las animaciones.

Esa bebida representa tres propiedades fundamentales: transform, transition y animation. Cada propiedad contiene elementos que nos ayudarán en la construcción de animaciones, revísalas en la Cheat Sheet de cada una.

Transform

La propiedad transform sirve para transformar un elemento HTML mediante funciones. Estas funciones permitirán trasladar, escalar, rotar o torcer a lo largo, ancho y profundidad del elemento.

Sin embargo, el usuario mira el resultado final de esta transformación. Por ejemplo, todos mirarán a Alicia pequeña, y no sabrán que realmente era grande. Por eso, esta propiedad está relacionada con transition para crear una animación.

Transition

La propiedad transition sirve para agregar un intervalo de tiempo a un elemento HTML para visualizar los cambios de un punto inicial A, a un punto final B.

Animación de las propiedades transition y transform

Cabe recalcar, con transform y transition solamente podemos manipular la posición inicial y la final, no las posiciones intermedias. Si se requiere crear una animación manipulando las posiciones intermedias, es necesario usar animation.

Animation

La propiedad animation sirve para cambiar estilos CSS a lo largo de un intervalo, consiste en reglas para un estado inicial, final e intermedios que conformarán una animación.

En este curso nos enfocaremos solamente en transition y transform, después seguir con el Curso de Animaciones con CSS, en el cual se abarcará la propiedad “animation”.

Contribución creada por Andrés Guano.

Aportes 33

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Básicamente la propiedad transform() nos permité modificar cualquier elemento que tengamos, podemos agrandarla, achicarla, escalarla, moverla, girarla, etc. Solo con esta propiedad ya tenemos las suficiente herramientas para manipular nuestro elemento, es decir, con ella ya podemos hacer que nuestro elemento se mueva a X posición, o que gire X grados 😄.
.
Sin embargo, únicamente con esta propiedad no lograremos ver ninguna animación, es decir, si tu usas la propiedad, verás que al cargar la página, el elemento aparecerá ya con la propiedad apicada, por ejemplo, si lo moviste 6 pixeles a la derecha entonces el elemento ya aparecerá movido, y es aquí donde entra transition. Esta propiedad permite generar ese movimiento, pero para ello necesita un punto inicial y un punto final.
.
Imagina que quieres mover un elemento 6 píxeles a la derecha, entonces, tu estado inicial va a ser 0 píxeles (cuando aún no se ha movido) y tu estado final va a ser 6 píxeles (cuando ya se movió), y la propiedad transition se encargará se que ese movimiento se vea suave, es decir, lo animará 👇

Soy el único que noto que hizo cosplay del traje de Alicia? xd

La propiedad transition por si sola nos puede ser de mucha ayuda al momento de aparecer elementos en la pantalla.
.
Por ejemplo, si tuviéramos un menu de navegación en la version mobile de nuestro sitio web y quisiéramos que aparezca en la pantalla de manera suave al hacer click, bastaría con aplicar la siguiente declaración al menu: transition: all 300ms ease-in-out
.
PERO aquí viene lo interesante… para que la transición funcione correctamente, la propiedad que esperamos que cambie de manera suave tiene que contener un valor que pueda aumentar o disminuir progresivamente, por ejemplo, de 0 a 1.
.
¿Qué quiere decir todo esto? Que si intentamos hacer que este menu aparezca suavemente solamente haciendo lo siguiente:
.

.menu {
	display: none;
}
.menu.active {
	display: block;
}

.
ESTO NO FUNCIONARÍA.
.
Para que funcione, una buena opción sería hacer lo siguiente:
.

.menu {
	opacity: 0;
	visibility: hidden;
}
.menu.active {
	opacity: 1;
	visibility: visible;
}

.
De esta manera, el valor ‘‘progresivo’’ del opacity (0 a 1) nos ayuda a que la transición pueda ejecutarse perfectamente. ¿Y el visibility? Sin esta propiedad, lo único que estaríamos haciendo es hacer invisible el menu, pero el elemento seguiría ahí. Por eso, al agregar un visibility: hidden, podemos quitar el elemento del DOM para evitar interactuar accidentalmente con el mientras este esta invisible.
.
Y así como este ejemplo, podemos darnos cuenta que estas transiciones funcionan perfectamente si quisiéramos que un elemento del DOM cambie suavemente el color, opacidad e incluso el tamaño, todas propiedades con valores '‘progresivos’’. 😃

❤Transform

Permite modificar elementos CSS (rotar, cambiar tamaño, mover de posición, etc).

🧡Transition

Desplazar elementos de un punto inicial a un punto final, pero no puede suceder nada en el trayecto del inicio hasta el fin.

💛Animation

Desplazar elementos de un punto inicial a un punto final, y puede existir cambios durante la trayectoria del inicio hasta el fin.

💚Cheat Sheet

animaciones_5bda2325-fb2e-4060-9751-5863d226fcf1.pdf

transformaciones_en_2d_y_3d_d712736c-5368-4c9b-8827-331dc347d536.pdf

transiciones_2093f06d-4937-4ba1-999d-73e1b9a56cca.pdf

Cuando conoces 400 algoritmos de ordenación, partes bases de datos con los dientes y juegas con dockers como si fueses malabares. Pero te da miedo mover cosas de A a b usando CSS. =(

Alguien mas noto que background de la profesora también tiene animaciones.

Comparto mis notas de la clase:

Me encantan las clases de la profesora Estefany, le mete mucha originalidad y trabajo al curso, además adecuo el curso a la temática del proyecto, incluso su vestimenta le queda genial, todo lo que lo hace más genial de aprender

Dato importante que viene del curso de optimización web, la propiedad “transform” no causa un “paint”
.
https://developers.google.com/web/fundamentals/performance/critical-rendering-path

ah, ojalá y haya practica 😕

🌟 Propiedades para crear animaciones con CSS y propiedades animables

Ideas/conceptos claves

Transformación del HTML Se refiere a transformar valores como el tamaño, posición, escala, etc.

Animable significa que sus valores cambian gradualmente durante un periodo de tiempo determinado

Apuntes

Propiedades animables

  1. Transform

    • Hace una transformación de HTML
    💡 Ejemplo: una caja con esta propiedad puede modificar la rotación o escalar su tamaño
    
    
  2. Transition

    • Nos permite ir de un lado a otro, no puede haber un cambio en la transición en el medio
  3. Animation

    • Es similar a transition, a diferencia que este te permite tener cambios intermedios
🎲 Debido a que son muchas propiedades se tiene una cheat sheet

si vamos con mucho animo

Me encanta todo el estilo de Alicia en el país de las maravillas que le pone Estefany al curso.

La diferencia entre transition y animation es que con animation puedes decidir que va a pasar en el proceso de la animacion

Propiedades para crear animaciones con CSS y propiedades animables

Transform:

Hace una transformación de los elementos de HTML. Rotar, escalar, etc. Modificando una propiedad con un valor iniciar a otro valor a lo largo del tiempo.

Transition:

Nos permite mover un elemento de un lado A a un lado B.

Animation:

Nos permite mover un elemento de un lado A a un lado B además que podemos controlar el tiempo en medio de un lado a otro.

Propiedades Animables:

Que sus valores cambian gradualmente durante un tiempo determinado.

2.-Propiedades para crear animaciones con CSS y propiedades animables.

Hay 3 propiedades fundamentales para hacer animaciones en CSS, las cuales son:

  • Transform: Hace una transformación de los elementos de HTML, por ejemplo si quiero rotar un div, imagen o cualquier cosa; si lo quiero hacer más grande o más pequeño.
  • Transition: Permite ir de un lado A a un lado B, mover un elemento. Solo se puede mover de un lado a un lado pero sin un cambio de por medio.
  • Animation: Es similar a transition, nos permite movernos de un lado a otro, a diferencia de transition, nos permite realizar cambios en medio del movimiento, podemos controlar más la transformación. Por ejemplo si quiero cambiar más colores.

Propiedades animables:

  • Animable: Significa que sus valores cambian gradualmente durante un periodo de tiempo determinado.

| una u otra .

  • más de un valor.

Transformación

El elemento transform os permite hacer una transformación de los elementos en HTML . Por ejemplo si tenemos un div que es un cuadrado con transform podemos modificar su tamaño.

donde puedo acceder a la guia de Notion que se muestra en el video

Les comparto un sitio que ayudará a complementar éste buen curso.

Gracias por las Cheat Sheet 💚

Quiero compartir un recurso que utilizo mucho como fuente de inspiracion

Puedes copiar el CDN y trabajar facilmente, pero lo puedes ver como un reto, lograr realizar las mismas animaciones sobre nuestros elementos

Animated

Comparto el repositorio de un proyecto en donde utilicé las 3 propiedades: * transition * transform * animation 📌Repo: <https://github.com/raulsr92/evaluacion3-ISIL-Funko_inspiration> 📌Demo: <https://raulsr92.github.io/evaluacion3-ISIL-Funko_inspiration/> ![]()![]()![](file:///C:/Users/RAUL%20SANCHEZ%20RDRIGUE/Downloads/EP03-Sanchez-Rodriguez-Raul.png)![](file:///C:/Users/RAUL%20SANCHEZ%20RDRIGUE/Downloads/EP03-Sanchez-Rodriguez-Raul.png)![]()![](https://static.platzi.com/media/user_upload/EP03-Sanchez-Rodriguez-Raul-min-36ead99b-d87a-41c5-9ab4-b7ad9f1baebd.jpg) ![]()![]()![]()
Al principio de nuestra historia, Alicia cae en una cueva dirigiéndose un salón donde observa una bebida con una frase: “Bébeme”. Esta bebida provoca que Alicia disminuya su estatura para que pueda accede al mundo de las animaciones. Esa bebida representa tres propiedades fundamentales: `transform`**,** `transition` **y** `animation`. Cada propiedad contiene elementos que nos ayudarán en la construcción de animaciones, revísalas en la *Cheat Sheet* de cada una. ## Transform La propiedad `transform` sirve para **transformar un elemento HTML mediante funciones**. Estas funciones permitirán trasladar, escalar, rotar o torcer a lo largo, ancho y profundidad del elemento. Sin embargo, el usuario mira el resultado final de esta transformación. Por ejemplo, todos mirarán a Alicia pequeña, y no sabrán que realmente era grande. Por eso, esta propiedad está relacionada con `transition` para crear una animación. * [Transform Cheat Sheet](https://static.platzi.com/media/public/uploads/transformaciones_en_2d_y_3d_d712736c-5368-4c9b-8827-331dc347d536.pdf) ## Transition La propiedad `transition` sirve para **agregar un intervalo de tiempo a un elemento HTML** para visualizar los cambios de un punto inicial A, a un punto final B. ![Animación de las propiedades transition y transform](https://media1.giphy.com/media/gCSOFQybTbM3pome6c/giphy.gif?cid=790b76110cbeb81a6b9b97187ae16e81b578ebfbea7452bf\&rid=giphy.gif\&ct=g) Cabe recalcar, con `transform` y `transition` solamente podemos manipular la posición inicial y la final, no las posiciones intermedias. Si se requiere crear una animación manipulando las posiciones intermedias, es necesario usar `animation`. * [Transition Cheat Sheet](https://static.platzi.com/media/public/uploads/transiciones_2093f06d-4937-4ba1-999d-73e1b9a56cca.pdf) ## Animation La propiedad `animation` sirve para cambiar estilos CSS a lo largo de un intervalo, consiste en reglas para un estado inicial, final e intermedios que conformarán una animación. * [Animation Cheat Sheet](https://static.platzi.com/media/public/uploads/animaciones_5bda2325-fb2e-4060-9751-5863d226fcf1.pdf) **En este curso nos enfocaremos solamente en** `transition` **y** `transform`, después seguir con el [Curso de Animaciones con CSS](https://platzi.com/cursos/animaciones-css/), en el cual se abarcará la propiedad “animation”.
Ahora, con ChatGPT y Platzi no hay excusas para no aprender a hacer transformaciones, transiciones y animaciones en CSS, siempre había sido mi talón de Aquiles. ![](https://static.platzi.com/media/user_upload/Screenshot%202023-12-01%20111359-afe06082-1f6b-4dd3-8b81-3a4303271fc5.jpg)
No se encuentran los recursos que ha realiza Estefi, donde lo podria encontrar?

Interesante

¿Se usará todo en este curso?
El examen muestra preguntas de cosas que no aprendimos. Eso no es justo

Propiedades para crear animaciones con CSS y propiedades animables

  • 🎁 Transform transform(): Hace una transformacion del elemento HTML, cambiamos una posicion inicial a otra en el transcurso del tiempo.
    🔗 Transform Cheat Sheet.
  • ➡️ Transition transition(): Ir de un lado A a B, en el eje x sin cambio en medio del punto a y b.
    🔗 Transition Cheat Sheet.
  • 🤖 Animation: Lo mismo que transition pero si puede haber un cambio en medio del punto a y b.
    🔗 Animation Cheat Sheet.

<img src=“https://media.giphy.com/media/gCSOFQybTbM3pome6c/giphy.gif”>

💡 Animable: que sus valores cambien gradualmente durante un periodo de tiempo.

  • transition: permite definir una transición suave entre dos estados de un elemento, como cambios de tamaño, posición, color, etc.

  • animation: permite definir una serie de estados y transiciones para un elemento, creando una animación compleja.

  • transform: permite aplicar transformaciones geométricas a un elemento, como escalado, rotación, traslación, etc.

Cheat Sheet CSS

Notas de la clase

Woooww!! Qué calidad de curso!!! ❤️