Cours 9 : The matrix

Ce que matrix nous dit nous dit sur l’art et le monde digital

TBD

Mettre une image de fond sur un balise

Pour mettre une image de fond, nous allons devoir utiliser la propriété background-image et une image. Pour l’image http://subtlepatterns.com/ propose des images motifs subtiles, parfait comme fond de base pour votre site.

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.

Le motif se répète automatiquement car c’est le comportement par défault de la propriété background-repeat. Pour ne pas la répéter il faut lui donner la valeurs no-repeat

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.

Les Transitions

les transitions nous permettent de faire une transition entre des valeurs de certaines propriétés CSS, sur une durée et une courbe d'accélération déterminée. Survolez le carré dans l’exemples et observez la transition.

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.

Nous pouvons également faire une transition en plusieurs propriété css à la fois. Il suffit de remplaces le nom le la propriété par all.

Ce qui donne:

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.

Animate.css, des animations prettes à l’emplois

https://daneden.github.io/animate.css/

Faire une animation soi-même

Pour réaliser des animations plus complexes, il existe un type de règle css qui nous permet de définir des images-clé. Pour chaque image clé (de 0 à 100), nous pouvons redéfinir les propriétés css qui s’aplliquent à l’élément.

Les « keyframes »

Example

@keyframes pincemi {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Ou écris autrement

@keyframes pincemi {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

En version raccourcie

@keyframes pincemi {
  to {
    opacity: 0;
  }
}

L’animation

Cette propriété est utilisée pour appeler une série de keyframes à l’intérieur d’une déclaration css.

Elle peut prendre ces propriétés:

• animation-name: @keyframes name (remember we chose tutsFade).
• animation-duration: the timeframe length, the total duration of the animation from start to the end.
• animation-timing-function: sets the animation speed ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
• animation-delay: the delay before our animation will start.
• animation-iteration-count: how many times it will iterate through animation.
• animation-direction: gives you the ability to change the loop direction, from start to end ,or from end to start, or both.
• animation-fill-mode: specifies which styles will be applied to the element when our animation is finished ( none | forwards | backwards | both )

Example

.hepla {
  animation-name: pincemi;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

ou en version raccourcie

.hepla {
  animation: pincemi 4s 1s infinite linear alternate;
}

Ce code va créer une animation infinie de 4s, avec 1s de retard et de direction opposée.

Les préfixes

Afin que ce code fonctionne dans tous les navigateurs, nous avons besoin d’ajouter des préfixes:

• Chrome & Safari: -webkit-
• Firefox: -moz-
• Opera: -o-
• Internet Explorer: -ms-

Voice ce que donne notre propriété animation avec les préfixes:

.element {
  -webkit-animation: pincemi 4s 1s infinite linear alternate;
  -moz-animation: pincemi 4s 1s infinite linear alternate;
  -ms-animation: pincemi 4s 1s infinite linear alternate;
  -o-animation: pincemi 4s 1s infinite linear alternate;
  animation: pincemi 4s 1s infinite linear alternate;
}

Voici ce que donne notre déclaration animation avec les préfixes:

@-webkit-keyframes pincemi {
  /* vos styles */
}
@-moz-keyframes pincemi {
  /* vos styles */
}
@-ms-keyframes pincemi {
  /* vos styles */
}
@-o-keyframes pincemi {
  /* vos styles */
}
@keyframes pincemi {
  /* vos styles */
}

Animations multiples

.hepla {
  animation: pincemi 4s 1s infinite linear alternate, pincemoi 4s 1s infinite
      linear alternate;
}

@keyframes pincemi {
  to {
    opacity: 0;
  }
}

@keyframes pincemoi {
  to {
    transform: rotate(180deg);
  }
}

D’un carré a un cercle

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.

Appliquer des courbe d’accélération avec cubic-bézier

https://matthewlein.com/ceaser/

Ajoutez le code entre infinite et alternate

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: pincemi 2s 1s infinite cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
}

Code final

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: pincemi 2s 1s infinite cubic-bezier(1, 0.015, 0.295, 1.225) alternate;
}

@keyframes pincemi {
  0% {
    border-radius: 0 0 0 0;
    background: coral;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 50% 0 0 0;
    background: darksalmon;
    transform: rotate(45deg);
  }
  50% {
    border-radius: 50% 50% 0 0;
    background: indianred;
    transform: rotate(90deg);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    background: lightcoral;
    transform: rotate(135deg);
  }
  100% {
    border-radius: 50%;
    background: darksalmon;
    transform: rotate(180deg);
  }
}

Example d’animation

Fond animé

• http://www.gradient-animator.com/ (couleur, gradients)
• http://davidwalsh.name/background-animation-css (image)

Kinégramme

http://thinkzone.wlonk.com/Kinegram/Kinegram.htm

See the Pen by borisrorsvort (@borisrorsvort) on CodePen.