IFCD0110 CONFECCIN Y PUBLICACIN DE PGINAS WEB.

ETSI Minas y Energa - UPM 1

TRANSICIONES
Bernardo Chenlo
 2

ANIMANDO CON CSS3

Cmo animar con 3 lneas de CSS en lugar de 60 de JS
Transiciones CSS3
Desarrolladas inicialmente por el equipo de
WebKit para Safari, actualmente estn
especificadas por el W3C.

Ejemplo de cmo al aumentar las funcionalidades

del navegador, la complejidad de codificar a la
hora del desarrollo disminuye.

El navegador se encarga de animar los elementos

que muestra por pantalla. Se termin tener que
usar largos programas con Javascript.
Un primer ejemplo
Vamos a hacer una transicin de color en un enlace al
colocar el puntero encima.

a.boton-verde {
padding: 10px 20px;
background: #9c3;
}
a.boton-verde:hover {
background: #690;
}
Suave es la animacin
El cambio de color del ejemplo, se produce
de golpe al situar el cursor sobre el
elemento.

Vamos a hacer una transicin suave entre

los dos colores usando animacin CSS3.

De momento hay que aadir los vendor-

prefixes para conseguir la mayor
compatibilidad.
Propiedades CSS3 por la transicin
transition-property
Propiedad CSS que queremos animar
transition-duration
Tiempo que durar la animacin
transistion-timing-function
Velocidad a la que se producir la
animacin
Primer ejemplo animado
a.boton-verde {
padding: 10px 20px;
background: #9c3;
transition-property: background;
transition-duration: 3s;
transition-timing-function: ease;
}
a.boton-verde:hover {
background: #690;
}
Segundo ejemplo animado
a.boton-verde {
padding: 10px 20px;
background: #9c3;
transition-property: all;
transition-duration: 3s;
transition-timing-function: ease;
}
a.boton-verde:hover {
padding: 100px 200px;
background: #690;
}
Segundo ejemplo simplificado
a.boton-verde {
padding: 10px 20px;
background: #9c3;
transition: all 3s;
}
a.boton-verde:hover {
padding: 100px 200px;
background: #690;
}
 10

TRANSFORMANDO CON
ANIMACIN
Efectos especiales con pocas lneas de CSS3
CSS3 FX
Podemos aplicar transiciones CSS3 a muchas
propiedades.

En general, a todas las que pasen de un valor finito

a otro.

Por ejemplo las que pasan de un tamao, posicin

o color a otro.

Pero los efectos son ms espectaculares si las

combinamos con transformaciones
Girando a Iron Man
.bocaabajo:hover {
transform: rotate(180deg);
transition: all 2s;
}
Buen efecto, pero al retirar el cursos, vuelve
bruscamente a la posicin original.
Girando a Iron Man v2
.bocaabajo {
transition: all 2s;
}
.bocaabajo:hover {
transform: rotate(180deg);
}

Ahora el efecto se produce tanto en el hover,

como en la vuelta al estado original.
 14

TRANSITION TIMING
FUNCTIONS
Animando a varias velocidades
Transition Timing Functions
Con transition-duration indicamos el tiempo que
va a pasar entre que empieza el cambio, hasta que
se llega al estado final.

Pero podemos hacer que ese cambio se produzca

linealmente, o que empiece lento y se vaya
acelerando, entre otras muchas opciones.
Para ello disponemos de distintas funciones de
tiempo de transicin
Transition Timing Functions
linear
Velocidad constante
ease (funcin por defecto)
Comienzo suave, acelera y final despacio
ease-in
Comienzo despacio, acelera y termina de golpe
ease-out
Empieza de golpe, acelera y termina despacio
ease-in-out
Comienzo despacio, acelera y termina despacio
Transition Timing Functions
PROYECTOS
Manos a la obra
PRACTICA 1
Galera de fotos con efectos
Galera de fotos con efectos
Haremos una galera para 3 imgenes

Descargar 3 pares de imgenes:

Imagen a tamao original
(1024x768)
Miniatura de la imagen original
(200x150)
 Galera de fotos con efectos
HTML inicial Lista de imgenes

<ul il="galeria">
<li class="miniatura">
<img src="images/imagen1_thumb.jpg" alt="">
</li>
<li>
<img src="images/imagen1.jpg" alt="">
</li>
<! Igual con las otras dos imgenes -->
</ul>
Galera de fotos con efectos
CSS inicial Lista de imgenes
ul#galeria {
position: relative;
list-style: none;
}
ul#galeria li.miniatura img {
width: 200px;
height: 150px;
margin: 2.2em;
}
ul#galeria li.imagen {
position: absolute;
left: 300px;
top: 2.2em;
}
Galera de fotos con efectos
Resultado parcial
Galera de fotos con efectos
Ocultar las imgenes completas
opacity:0;
Al colocar el cursor sobre la miniatura,
hacer visible la imagen completa
ul#galeria li.miniatura:hover + li.imagen
Animar este cambio para suavizar la
transicin
transition: 0.85s opacity linear;
Galera de fotos con efectos
Ocultar las imgenes completas
opacity:0;
Al colocar el cursor sobre la miniatura,
hacer visible la imagen completa
ul#galeria li.miniatura:hover + li.imagen
Animar este cambio para suavizar la
transicin
transition: 0.85s opacity linear;
Galera de fotos con efectos
Resultado final
PRACTICA 2
Montn de fotografas
Montn de fotografas
Haremos una galera para 3 imgenes

Descargar 3 pares de imgenes:

Imagen a tamao original
(1024x768)
Miniatura de la imagen original
(200x150)
Montn de fotografas
HTML inicial Div con las imgenes

<div id="fotografias">
<img src="images/imagen1.jpg" alt="">
<img src="images/imagen2.jpg" alt="">
<img src="images/imagen3.jpg" alt="">
</div>
 Montn de fotografas
CSS inicial Div con las imgenes

#fotografias, #fotografias img {

width: 640px;
height: 480px;
}
#fotografias {
margin: 0 auto;
}
Montn de fotografas
Resultado parcial
Montn de fotografas
Colocamos todas las imgenes sobre
puestas
position: absolute;
Les ponemos un borde blanco a las
imgenes y una sombra negra exterior
Montn de fotografas
Resultado parcial
Montn de fotografas
Cuando pongamos el cursos encima vamos
a rotar la primera y la ltima imagen
Rotamos la primera imagen 24deg
#fotografias:hover img:first-child
Rotamos la ltima imagen -24deg
#fotografias:hover img:first-child
Fijamos un eje de giro
transform-origin: center 1200px;
Montn de fotografas
Resultado final
PRACTICA 3
Men desplegable
Men desplegable
HTML inicial Men desplegable
<nav>
<ul>
<li><a href="#">Inicio</a>
<li><a href="#">Servicios</a>
<ul class="submenu">
<li><a href="#">Consultora</a>
<li><a href="#">Diseo</a>
<li><a href="#">Desarrollo</a>
</ul>
<li><a href="#">Contacto</a>
</ul>
</nav>
Men desplegable
CSS inicial Men desplegable
nav {
height: 41px;
background: #35f;
}
nav ul li {
display: block;
width: 150px;
text-align: center;
float: left;
margin: 0;
padding: 0;
}
Men desplegable
CSS inicial Men desplegable
nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
}
Men desplegable
CSS inicial Men desplegable
nav ul.submenu {
background: rgba(0,0,0,0.8);
position: relative;
border-radius: 0 0 5px 5px;

}
nav ul.submenu li {
float: none;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
Men desplegable
Resultado parcial
Men desplegable
Ocultamos el submen deplegable
height: 0px;
overflow: hidden;
Al colocar el cursos encima de los elementos del
menu, aumentar al altura del submen para que
se vea
nav ul li:hover ul.submenu
Aadir una transicin para suavizar la animacin
Men desplegable
Resultado final
PRACTICA 4
Navegacin horizontal con pestaas
Navegacin horizontal con pestaas
HTML inicial

<nav>
<ul role="navigation">
<li>Inicio</li>
<li>Novedades</li>
<li>Empresa</li>
<li>Contacto</li>
</ul>
</nav>
Navegacin horizontal con pestaas
Alineamos las pestaas
Letra mayscula, familia Futura
Aadimos a las pestaas
Borde fino gris
Redondeamos las esquinas superiores
Aadimos sombra a las pestaa y a los
enlaces
Gradiente como fondo
background: linear-gradient(#dfc891, #776c51);
Navegacin horizontal con pestaas
Resultado parcial
Navegacin horizontal con pestaas
CSS

ul[role=navigation] {
background: #000;
padding-top: 3.2em;
padding-bottom: 1em;
overflow: hidden;
margin-top: 0;
}
ul[role=navigation] li {
margin-left: -.5em;
}
Navegacin horizontal con pestaas
Resultado parcial
Navegacin horizontal con pestaas
Al colocar el cursor sobre una de las
pestaas hacer que se eleve y se
superponga la resto de las pestaas
Navegacin horizontal con pestaas
Resultado final
Extra
Con la librera jQuery (para facilitar el
Javascript) vamos a hacer que tras
hacer click sobre un enlace del men,
destaque
Extra
Importar jQuery en index.html
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js

$(function(){
$('a').click(function() {
$('a.actual').removeClass('actua
l');
$(this).addClass('actual');
});
});