Médiaforma

Guide de survie – Transitions

Print Friendly, PDF & Email

Transition de couleur

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .anim-couleur
      {
        font-size: 40px;
        -moz-transition: color 2s ease-in;
        -webkit-transition: color 2s ease-in;
        -o-transition: color 2s ease-in;
      }
      .anim-couleur:hover
      {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="anim-couleur">Placez le pointeur sur ce texte</p>
  </body>
</html>

Transition sur l’opacité

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .anim-opacite
      {
        -moz-transition: opacity 2s linear;
        -webkit-transition: opacity 2s linear;
        -o-transition: opacity 2s linear;
      }
      .anim-opacite:hover
      {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <img class="anim-opacite" src="ecureuil.jpg" />
  </body>
</html>

Animer une transformation

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .animation
      {
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
      }
      .animation:hover
      {
        -moz-transform: translate(50px, 0);
        -webkit-transform: translate(50px, 0);
        -o-transform: translate(50px, 0);
      }
    </style>
  </head>
  <body>
    <img class="animation" src="ecureuil.jpg" />
  </body>
</html>

Animation en JavaScript

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Animation déclenchée en JavaScript</title>
    <style>
      div
      {
        position: absolute;
        left: 100px;
        top: 40px;
        height: 100px;
        width: 100px;
        background: Yellow;
        -webkit-transition: top 1s ease-in;
        -moz-transition: top 1s ease-in;
        -o-transition: top 1s ease-in;
        transition: top 1s ease-in;
      }
    </style>
    <script>
      function animer()
      {
        var el = document.getElementById('madiv');
        el.setAttribute("style","top: 150px;");
      }
      function reinit()
      {
        var el = document.getElementById('madiv');
        el.setAttribute("style","left: 100px; top:40px;");
      }
    </script>
  </head>
  <body>
    <button onclick="animer()">Cliquez ici pour animer la <div></button>
    <button onclick="reinit()">Cliquez ici pour réinitilaiser la <div></button>
    <div id="madiv">Une simple <div></div>
  </body>
</html>

Transitions multiples

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=iso-8859-1" />
    <title>Une boîte à coins arrondis en CSS3</title>
    <style type="text/css">
      .animation
      {
        -moz-transition: all 2s linear;
        -webkit-transition: all 2s linear;
        -o-transition: all 2s linear;
      }
      .animation:hover
      {
        -moz-transform: translate(50px, 0) rotate(360deg);
        -webkit-transform: translate(50px, 0) rotate(360deg);
        -o-transform: translate(50px, 0) rotate(360deg);
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <img class="animation" src="ecureuil.jpg" />
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.