ANIMACIONES CSS
Julieth Zuluaga
Isabela Fonseca
Juan José Figueroa
Gabriela Velásquez
¿Para qué sirven las
animaciones css?
Las animaciones CSS permiten animar la transición
entre un estilo CSS y otro. Las animaciones constan
de dos componentes: un estilo que describe la
animación CSS y un conjunto de fotogramas que
indican su estado inicial y final, así como posibles
puntos intermedios en la misma.
Vent_j_s
• Son muy fáciles de usar para animaciones
sencillas.
• El motor de renderizado puede usar
técnicas de optimización para que la
animación se vea tan suave como sea
posible.
• Al ser el navegador quien controle la
secuencia de la animación, permitimos que
optimice el rendimiento y eficiencia de la
misma.
¿Para que se usa una transición?
Las transiciones se utilizan para animar
propiedades CSS siguiendo una curva de
aceleración.
transition-property: la propiedad css que vamos a
transicionar.
transition-duration: la duración de la transición.
transition-timing-function: la "forma" en la que la
transición tendrá lugar.
transition-delay: el retraso que queremos
aplicarle al inicio de la transición.
¿Qué es una animación?
@keyframe my-animation
0% {
transform: scale(1, 1);
Las animaciones nos permiten pasar un }
elemento del estado X al estado Z, 30% {
transform: scale(0.92, 0.95);
permitiendo definir un número variable de }
estados intermedios. 50%{
transform: scale(1, 1);
}
Los keyframes son la regla que nos permite
80% {
transform: scale(0.92, 0.95);;
establecer el nombre de nuestra animación y }
definir los fotogramas clave. 100% {
transform: scale(1, 1);
}
Propiedades de la animación
animation-duration: el tiempo en el cual se ejecuta cada ciclo de la animación
animation-timing-function: la "forma" en la que la animación tendrá lugar
animation-delay: el retraso que queremos aplicarle al inicio de la animación
animation-name: el nombre que hayamos dado a la animación.
animation-direction: el "sentido" en el que se ejecutará la animación
animation-iteration-count: podemos definir cuantos ciclos va a tener la
animación (cuantas veces se repetirá)
animation-play-state: podemos definir si en el momento del renderizado de la
página, la animación está ejecutándose o en pausa
animation-fill-mode: podemos definir qué keyframe será visible cuando la
animación no se esté ejecutando
Timing functions y tiempo
Las funciones de tiempo que aplicamos a las animaciones y
transiciones están basadas en las curvas cúbicas de Bézier, que se
desarrolló para el diseño aeronáutico y de automoción, por ejemplo
si queremos mover cohetes y coches de un lado a otro:
ease: empieza despacio, coge velocidad y termina muy despacio.
linear: la velocidad es constante durante toda la animación.
ease-in: empieza despacio y poco a poco coge velocidad para
terminar deprisa.
ease-out: empieza deprisa y termina despacio.
ease-in-out: empieza despacio, gana velocidad y termina despacio.
Es similar a ease.
cubic-bezier: permite especificar una curva propia.
Propiedades CSS a las que se les pueden aplicar animaciones y/o
transiciones:
Propiedades de color: color, opacity Propiedades del box-model: box-shadow, margin,
Propiedades de columnas: column-width, column-count, padding, max-height, min-height, height, max-width,
min-width, width, visibility, vertical-align.
column-gap, column-rule-color, column-rule-width.
Propiedades de posicionamiento: bottom, left, right,
Propiedades de texto: letter-spacing, tab-size, text-indent, top, z-inPropiedadesdex.
word-spacing. de tipografía: font-weight, font-strech, font-size,
Propiedades de decoración de texto: line-height, font-size-adjust.
text-decoration-color, text-shadow. Propiedades object-fit: object-position.
Propiedades flex: flex-basis, flex-grow, flex-shrink, order. Propiedades de interacción: outline-color,
outline-width, outline-offset.
Propiedades de fondo y bordes: background-color,
Propiedades de transformación: transform,
background-position, background-size, border-witdh, transform-origin, perspective, perspective-origin.
border-radius, border-image. Propiedades de forma: shape-outside, shape-margin,
shape-image-threshold.
GRACIAS
