Les mouvements
en CSS

Les transformations

Déplacements


  .element{
    transform: translate( [x], [y] );
  }

Exemple


  .element{
    transform: translate(-50%, 0);
    // transform: translateX(-50%);
  }

Rotations


  .element{
    transform: rotate( [value] );
  }

Exemple


  .element{
    transform: rotate(-10deg);
  }

Mise à l'échelle


  .element{
    transform: scale( [x], [y] );
  }

Exemple


  .element{
    transform: scale(2);
  }

Exemple


  .element{
    transform: rotate(-10deg) translateX(-50%) scale(2);
  }

Les transitions


  .element{
    transition: [property] [duration] [ease] [delay];
  }

Exemple #1


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(19, 108, 108, 0.2);
    transition: background-color 1s ease-in;
  }

  #box:hover{
    height: 60px;
    width: 60px;
    background-color: rgba(19, 108, 108, 1);
  }

Exemple #2


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(19, 108, 108, 0.2);
    transition: all 1s ease-in;
  }

  #box:hover{
    height: 60px;
    width: 60px;
    background-color: rgba(19, 108, 108, 1);
  }

Exemple #3


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(19, 108, 108, 0.2);
    transition: background-color 1s ease-in, height .3s ease-in-out, width .3s ease-in-out;
    transition: all .3s ease-in-out, background-color 1s ease-in;
  }

  #box:hover{
    height: 60px;
    width: 60px;
    background-color: rgba(19, 108, 108, 1);
  }

Exemple #4


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(19, 108, 108, 0.2);
    transition: background-color 1s ease-in, height .3s ease-in-out, width .3s ease-in-out;
    transition: all .3s ease-in-out 1s, background-color 1s ease-in;
  }

  #box:hover{
    height: 60px;
    width: 60px;
    background-color: rgba(19, 108, 108, 1);
  }

Qu'est-ce qui est animable ou pas ?

  • font-size
  • background-color
  • width
  • left
  • …
  • display
  • font-family
  • position
  • …

Animation & keyframes


  @keyframes [name] {
    from {
      [styles];
    }

    to {
      [styles];
    }
  }

Exemple #1


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(227, 0, 89, 1);
    animation: anim 2s ease-in-out 0s infinite;
  }

  @keyframes anim {
      from{
        height: 40px;
      }
      to{
        height: 60px;
        background-color: rgba(19, 108, 108, 1);
      }
    }
              

  .element {
    animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]
  }

Exemple #2


  #box{
    height: 40px;
    width: 40px;
    background-color: rgba(227, 0, 89, 1);
    animation: anim 2s ease-in-out 0s infinite alternate forwards running;
  }

  @keyframes anim {
      0%{
        width: 40px;
      }
      50%, 70%{
        height: 80px;
        background-color: rgba(19, 108, 108, 1);
      }
      100%{
        width: 60px;
      }
    }

Est-ce qu'il faut animer tout,
tout le temps ?

Non !

Il y a des moments appropriés

Exercice

Corrigé