Desarrollo de Recursos
Animados para Web
Mtro. Néstor A. Arredondo
© Universidad Internacional de La Rioja (UNIR)
Desarrollo de Recursos
Animados para Web
Temario de Semana 3
2.4. Propiedad: transition
2.5. Box Model
2.6. Flujo normal
2.7. Propiedad: transform, 2D
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Propiedad transition
La propiedad transition en CSS nos permite La propiedad transition se compone de cuatro subpropiedades:
crear animaciones suaves y graduales cuando • transition-property: Especifica la propiedad CSS que
cambiamos el valor de una propiedad CSS de queremos animar (por ejemplo, background-color, width,
un elemento. En lugar de que un cambio height).
ocurra de forma instantánea, transition • transition-duration: Define la duración de la transición en
permite que este cambio se realice de segundos.
manera suave a lo largo de un período de • transition-timing-function: Determina la curva de animación
tiempo determinado. (lineal, acelerado, desacelerado, etc.).
• transition-delay: Establece un retardo antes de que
comience la transición.
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Propiedad transition
transition: property duration timing-function delay;
button { transition: background-color 0.3s ease-in-out; }
property: Especifica la propiedad CSS a la que se aplicará la transición (por ejemplo, background-color,
width, height, opacity, etc.). Puedes indicar múltiples propiedades separadas por comas.
duration: Define la duración de la transición en segundos. Por ejemplo, 0.5s indica una transición de
medio segundo
timing-function: Determina la curva de animación, es decir, cómo se acelerará o desacelerará
la transición.
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Propiedad transition - timing-function:
© Universidad Internacional de La Rioja (UNIR)
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Propiedad transform
En esencia, transform te permite aplicar 1. Traslaciones (translate): Mover un elemento a lo largo de los
diversas transformaciones a un elemento, ejes X, Y o Z.
como si estuvieras manipulándolo 2. Rotaciones (rotate): Girar un elemento alrededor de un
físicamente en un espacio 3D. Estas punto determinado.
transformaciones pueden ser: 3. Escalados (scale): Aumentar o disminuir el tamaño de un
elemento.
4. Sesgos (skew): Distorsionar un elemento inclinando sus
ejes.
5. Matrices (matrix): Combinar múltiples transformaciones en
una sola matriz.
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Propiedad transform
elemento { transform: <función>(<valor>); }
div { transform: translateX(50px) rotate(45deg) scale(0.5); }
1. elemento: El elemento HTML al que deseas aplicar la transformación.
2. función: La transformación que deseas aplicar (translate, rotate, scale, skew o matrix).
3. valor: El valor numérico que indica la intensidad de la transformación, junto con la unidad de medida
correspondiente (px, %, deg, etc.).
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Rotate Scale Skew
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Translate Matrix Scale, rotate, shadow
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Box model
Todo en CSS se comporta como una caja o cuadro. Los
navegadores necesitan saber dónde y cómo se debe
colocar un elemento en relación con otros y, para ello,
cada caja posee diferentes partes que trabajan para
que se puedan ver en la página.
Partes de una caja :
1. Cuadro de contenido o content: área donde se
muestra su contenido.
2. Cuadro de relleno o padding: área que se coloca
alrededor del contenido para generar relleno.
3. Cuadro de borde o border: área que envuelve el
cuadro de relleno y el cuadro de contenido.
4. Cuadro de margen o margin: área que envuelve a los
anteriores cuadros.
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Box model
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Display : block, inline, inline block
Caja de bloque
La caja empieza siempre en una nueva línea. La caja se
extiende horizontalmente por todo el espacio disponible.
Se le pueden aplicar las propiedades de width y height.
Las propiedades de padding, margin y border causarán
que otros elementos se alejen de la caja. Algunas
etiquetas que se comportan de esta manera son div,
section y ul.
Caja en línea
La caja no tiene porqué empezar en una nueva línea, si
todavía queda espacio disponible horizontalmente. La
caja no se extiende horizontalmente si no lo necesita,
pero puede producir una rotura de caja si ocupa más de
una línea. No respeta las propiedades de width y height.
Las propiedades verticales de padding, margin y border se
aplicarán, pero no provocará que otros elementos se
alejen de ella. Las propiedades horizontales de padding,
margin y border se aplicarán y provocará que otros
elementos se alejen de ella. Algunas etiquetas que se
comportan de esta manera son a, span y strong
© Universidad Internacional de La Rioja (UNIR)
2.3. CSS
Display : block, inline, inline block
© Universidad Internacional de La Rioja (UNIR)
Desarrollo de Recursos
Animados para Web
¡Gracias por su atención!
© Universidad Internacional de La Rioja (UNIR)
