Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
13H
25M
9S

Propiedades para crear animaciones con CSS y propiedades animables

2/20
Recursos

Al principio de nuestra historia, Alicia cae en una cueva dirigi茅ndose un sal贸n donde observa una bebida con una frase: 鈥淏茅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 鈥渁nimation鈥.

Contribuci贸n creada por Andr茅s Guano.

Aportes 28

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥樷榩rogresivo鈥欌 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 '鈥榩rogresivos鈥鈥. 馃槂

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. =(

鉂ransform

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

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

Dato importante que viene del curso de optimizaci贸n web, la propiedad 鈥渢ransform鈥 no causa un 鈥減aint鈥
.
https://developers.google.com/web/fundamentals/performance/critical-rendering-path

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

馃専 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

ah, ojal谩 y haya practica 馃槙

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

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!!! 鉂わ笍