Transicions

Encara que hem vist algunes de les opcions que ens ofereixen HTML5 i CSS3, i les teues pàgines web ja deuen tindre un aspecte prou espectacular, la realitat és que aquestos apunts únicament són la punta del iceberg de la enorme quantitat d’opcions i possibilitats d’aquestos dos llenguatges. En la xarxa podràs trobar moltes pàgines web que exploren el potencial de HTML5, com www.html5rocks.com, i també programes sencers com editors d’imatges, jocs, processadors de text, etcètera, fets únicament amb HTML5 i CSS3.

Les pàgines web són ara molt més dinàmiques que ho eren abans, i han deixat de ser simples documents per a ser programes de ple dret. Algunes de les opcions que ens hem deixat sense explorar tenen a veure precisament amb el dinamisme de la web, com són les transicions suaus a l’hora de canviar una certa propietat. Recorda que aquestes funcions solament són suportades per les versions més modernes dels navegadors web. En el codi següent tens un exemple de com fer que una imatge augmente de grandària de manera suau quan el ratolí es situa sobre ella.

img {
    width: 10%;
    height: 10%;
    transition-property: width, height;
    transition-duration: 3s;
    transition-delay: 1s;
}

img:hover {
    width: 100%;
    height: 100%;
}