Exercices sur les animations par CSS3

test des transitions en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 effectue une rotation avec zoom lors du survol par le curseur de la souris,

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Test de la rotation</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1,h2 {
      text-align:center;
    }
 
    h2, em {
      -webkit-transition-property:all;
      -webkit-transition-duration:3s;
      -webkit-transition-timing-function:cubic-bezier(0,1,1,0);
      -webkit-transition-timing-function:ease-out;
      -moz-transition-property:all;
      -moz-transition-duration:3s;
      -moz-transition-timing-function:cubic-bezier(0,1,1,0);
      -moz-transition-timing-function:ease-out;
      -o-transition-property:all;
      -o-transition-duration:3s;
      -o-transition-timing-function:cubic-bezier(0,1,1,0);
      -o-transition-timing-function:ease-out;
      transition-property:all;
      transition-duration:3s;
      transition-timing-function:cubic-bezier(0,1,1,0);
      transition-timing-function:ease-out;
    }
 
    h1 {
      width:10em;
      margin:0;
      padding:0;
      background-color:#000;
      color:#FFF;
      font-size:300%;
    }
 
    h2 {
      position:relative;
      bottom:-10em;
      width:40%;
      margin:auto;
      background-color:hsl(60, 100%, 50%);
    }
 
    h2:hover {
       -webkit-transform: rotate(720deg) scale(2);
       -moz-transform: rotate(720deg) scale(2);
       -o-transform: rotate(720deg) scale(2);
       transform: rotate(720deg) scale(2);
       background-color: #F00;
       color: #000;
       text-shadow: #707 0.2em 0.2em 0.3em;
       border-radius: 1em;
    }
 
    em {
     color:#F00;
    }
 
    h2:hover em {
       color:#00F;
    }
 
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test des transitions</h1>
  <h2>ceci est l'effet que je nomme <em>Hélix</em> !</h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

transition de gradients en CSS3

Dans cet exercice :

Nous allons créer une page contenant :
- un titre h1 positionné en fixe et n'occupant qu'une petite partie de l'espace d'affichage,

un div occupant tout l'espace d'affichage,

Nous positionnerons dans le div un gradient radial et un gradient linéaire,

Au survol du div par le curseur nous modifierons progressivement les paramètres du gradient,

Fichier à produire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Page de présentation dla superosition de différents styles de fonds</title>
  <!-- style1 utilisation de style et modification des paramètres -->
  <style type="text/css">
    div, h1 {
      -webkit-transition-property:all;
      -moz-transition-property:all;
      -ms-transition-property:all;
      -o-transition-property:all;
      transition-property:all;
      -webkit-transition-duration:3s;
      -moz-transition-duration:3s;
      -ms-transition-duration:3s;
      -o-transition-duration:3s;
      transition-duration:3s;
    }
 
    h1 {
      font-size:200%;
      position:fixed;
      width:10%;
      top:0;
      right:0;
      text-align:center;
      margin:1em;
      padding:1em;
      border-radius:2em;
      background-position: 100% 0%;
      background-size: 200% 200%;
      background-image:-webkit-linear-gradient(45deg, #FFF 10%, #000 90%);
      background-image:-moz-linear-gradient(45deg, #FFF 10%, #000 90%);
      background-image:-ms-linear-gradient(45deg, #FFF 10%, #000 90%);
      background-image:-o-linear-gradient(45deg, #FFF 10%, #000 90%);
      background-image:linear-gradient(45deg, #FFF 10%, #000 90%);
      color:#FFF;
      text-shadow:0 0 0.1em #000;
    }
    h1:hover {
      background-position: 0% 100%;
      text-shadow:0 0 0.1em #FFF;
      color:#000;
    }
 
    div {
      padding:0.5em 1em;
      font-size:150%;
      background-position: 60% 20%,0% 100%;
      background-repeat: no-repeat,no-repeat;
      background-size: 20% 20%,100% 300%;
      background-color: #FF8;
      text-shadow:0 0 0 #000;
      background-image: -webkit-radial-gradient(50% 50%, circle, rgba(100%,0%,0%,1) 50%, rgba(100%,100%,0%,0) 60%),
	                -webkit-linear-gradient(top, #405, #FF0);
      background-image: -moz-radial-gradient(50% 50%, circle, rgba(100%,0%,0%,1) 50%, rgba(100%,100%,0%,0) 60%),
	                -moz-linear-gradient(top, #405, #FF0);
      background-image: -ms-radial-gradient(50% 50%, circle, rgba(100%,0%,0%,1) 50%, rgba(100%,100%,0%,0) 60%),
	                -ms-linear-gradient(top, #405, #FF0);
      background-image: -o-radial-gradient(50% 50%, circle, rgba(100%,0%,0%,1) 50%, rgba(100%,100%,0%,0) 60%),
	                -o-linear-gradient(top, #405, #FF0);
      background-image: radial-gradient(50% 50%, circle, rgba(100%,0%,0%,1) 50%, rgba(100%,100%,0%,0) 60%),
	                linear-gradient(top, #405, #FF0);
    }
    div:hover {
      background-position: 40% 130%,0% 0%;
      text-shadow:0 0 0.1em #FFC
    }
 
    a {color:#FF0}
    a:visited {color:#CCC}
    a:hover {color:#F80}
    ::selection {color:red;background-color:#FF0}
 
  </style>
</head>
<body>
 
<h1>Le jour et la nuit</h1>
 
<div>
  <p>Le Jour et la Nuit est un film français réalisé par Bernard-Henri Lévy, sorti en 1997.
    Le film a connu un échec commercial et critique retentissant</p>
  <h2>Synopsis</h2>
  <p>Écrivain vieillissant, Alexandre (Alain Delon) vit en monarque au fond du Mexique.
    Entouré de sa cour (personnages étranges et mystérieux), il trompe l'ennui par
    l'alcool, la boxe, les femmes et la montgolfière. Désireux d'acquérir les droits
    d'adaptation du premier roman de l'artiste, le producteur Filippi (Karl Zéro) et
    son actrice Laure (Arielle Dombasle) arrivent bientôt dans la vie de l'auteur
    célébré. Alexandre et Laure vont, peu à peu, se rapprocher et déclencher au sein
    de la communauté les passions les plus extrêmes...</p>
  <h2>Autour du film</h2>
  <ul>
    <li>Le film fut tourné au Mexique, à Ixtapa (Chiapas), Cuernavaca et dans l'État de
      Morelos.</li>
    <li>Le film est dédié à André Lévy, père de Bernard-Henri.</li>
    <li>Alain Delon déclara à la sortie du film : <q>Ma rencontre avec Bernard-Henri Lévy
	fut un événement heureux, comme le fut, en 1989, celle avec Godard pour Nouvelle Vague3.</q></li>
    <li>Dans la dernière scène du film, on voit, bien en évidence sur le bureau d'Alexandre,
      la biographie d'Orson Welles écrite par Simon Callow et qui venait de paraître à l'époque.
      Le livre, qui apparaît comme un hommage et une référence au réalisateur américain,
      fait comprendre au spectateur que la blessure de Sonia est au film de Bernard-Henri Lévy
      ce que Rosebud est à Citizen Kane.</li>
    <li>Le film n'enregistra que 73 147 entrées en France dont 28 000 à Paris. L'œuvre avait
      pourtant bénéficié de 3,5 millions de francs de la Commission des avances sur recettes,
    organisme dont BHL était alors le président.</li>
    <li>La production, franco-belgo-canado-espagnole, fut coordonnée par Les films du lendemain,
      société créée par le propre père de BHL et François Pinault, pour un budget total de 53
      millions de francs, ce qui représentait une somme énorme pour un film français.</li>
    <li>Le Jour et la Nuit est le dernier film d'Alain Delon en tant que vedette principale.
      Dans 1 chance sur 2, il partage l'affiche avec Jean-Paul Belmondo et apparait en Jules César
      (mais dans un rôle secondaire) dans son dernier film de cinéma : Astérix aux Jeux olympiques.</li>
    <li>Distribué par M6 (coproducteur du film) en VHS une première fois, Le Jour et la Nuit sort
      en DVD zone 2 en 2000. Distribué par l'éditeur Bonzaï dans la collection Sweet Budget,
      le film est depuis épuisé. En 2006, un éditeur américain a ressorti le film en DVD zone 1
      NTSC. En octobre 2010, l'éditeur MAKAM ressort Le Jour et la Nuit dans une édition collector 2 DVD.
      Le coffret comprend : le film, le documentaire Autopsie d'un massacre de Carole Mathieu et
      Thierry Humbert (axé sur l'accueil négatif de la presse) ainsi qu'un <q>droit de réponse</q> de
      Bernard-Henri Levy lui-même.</li>
    </ul>
<cite>Ce texte provient de <a href="http://fr.wikipedia.org/wiki/Les_Feuilles_mortes">Wikipedia</a>.</cite>
<p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
  <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</div>
 
</body>
</html>

voir le résultat

test des animations en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 effectue une série de 20 rotations,
Les rotations impaires se feront en grossissant le titre,
Les rotations paires se feront en réduisant le titre,
Les rotations ne commenceront que 5 secondes après le chargement de la page.

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test de la rotation</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1,h2 {
      text-align:center;
    }
    h1 {
      background-color:#000;
      color:#FFF;
      font-size:300%;    
    }
 
    h2 {
      width:30%;
      position:absolute;
      top:40%;
      left:35%;
      background-color:#FF0;
      padding:1ex;
      border: solid 1ex #000;
      margin:auto;
      -webkit-animation-name: diagonal-slide;
      -webkit-animation-delay: 1s;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: 3;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function:linear;
      -o-animation-name: diagonal-slide;
      -o-animation-delay: 1s;
      -o-animation-duration: 2s;
      -o-animation-iteration-count: 3;
      -o-animation-direction: alternate;
      -o-animation-timing-function:linear;
      -moz-animation-name: diagonal-slide;
      -moz-animation-delay: 1s;
      -moz-animation-duration: 2s;
      -moz-animation-iteration-count: 3;
      -moz-animation-direction: alternate;
      -moz-animation-timing-function:linear;
      animation-name: diagonal-slide;
      animation-delay: 1s;
      animation-duration: 2s;
      animation-iteration-count: 3;
      animation-direction: alternate;
      animation-timing-function:linear;
    }
 
    @-webkit-keyframes diagonal-slide {
      from {
      }
      10% {
        -webkit-transform: rotate(72deg) scale(0.5);
      }
      50% {
        background-color:#08F;
        color:#FFF;
        -webkit-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
        border-radius:1em;
        border-width:0;
        padding:2ex;
      }
      to {
        -webkit-transform: rotate(720deg) scale(1);
        transform: rotate(720deg) scale(1);
        color:#000;
        background-color:#FF0;
        border-width:1ex;
        border-radius:0;
        padding:1ex;
      }
    }
 
    @-o-keyframes diagonal-slide {
      from {
      }
      10% {
        -o-transform: rotate(72deg) scale(0.5);
      }
      50% {
        background-color:#08F;
        color:#FFF;
        -o-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
        border-radius:1em;
        border-width:0;
        padding:2ex;
      }
      to {
        -o-transform: rotate(720deg) scale(1);
        transform: rotate(720deg) scale(1);
        color:#000;
        background-color:#FF0;
        border-width:1ex;
        border-radius:0;
        padding:1ex;
      }
    }
 
    @-moz-keyframes diagonal-slide {
      from {
      }
      10% {
        -moz-transform: rotate(72deg) scale(0.5);
      }
      50% {
        background-color:#08F;
        color:#FFF;
        -moz-transform: rotate(360deg) scale(2);
        transform: rotate(360deg) scale(2);
        border-radius:1em;
        border-width:0;
        padding:2ex;
      }
      to {
        -moz-transform: rotate(720deg) scale(1);
        transform: rotate(720deg) scale(1);
        color:#000;
        background-color:#FF0;
        border-width:1ex;
        border-radius:0;
        padding:1ex;
      }
    }
 
    @keyframes diagonal-slide {
      from {
      }
      10% {
        transform: rotate(72deg) scale(0.5);
      }
      50% {
        background-color:#08F;
        color:#FFF;
        transform: rotate(360deg) scale(2);
        border-radius:1em;
        border-width:0;
        padding:2ex;
      }
      to {
        transform: rotate(720deg) scale(1);
        color:#000;
        background-color:#FF0;
        border-width:1ex;
        border-radius:0;
        padding:1ex;
      }
    }
  </style>
</head>
<body>
 
  <h1>Test des animations</h1>
  <h2>Effet <em>Don Quichotte</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>