Propiedades para crear animaciones con CSS y propiedades animables

2/20
Recursos

Aportes 23

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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á 👇

Hace poco tiempo implemente esta pequeña animación en mi pagina como si alguien estuviera escribiendo mi nombre. 🥺


.
¿Qué les parece?
.
Sebastian Heredia

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.

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

si vamos con mucho animo

Comparto mis notas de la clase:

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

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

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

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

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.

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.

ah, ojalá y haya practica 😕

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.

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

🌟 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

Cheat Sheet CSS

Notas de la clase

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