Mémos

M é m o - l a b .

transform – transitions – animations

Les transitions permettent de définir les propriétés css d’un élément html qui lui seront appliquées suite à un événement. La propriété transform permet d’appliquer des translations, des rotations, des distorsions, des agrandissements ou rétrécissements et des perspectives à un élément html.

Notions css abordées : transition, animation, transform.

La propriété transition peut prendre 4 paramètres :

  • propriété concernée (‘string’)
  • durée de la transition (‘nombre’ + ‘unité’ (s ou ms))
  • effet de la transition (ease, linear, ease-in, ease-out, ease-in-out ou fonction cubic-bezier(a,b,b,c,d))
  • instant de départ de la transition (‘nombre’ + ‘unité'(en s ou ms))

La propriété animation peut prendre 7 paramètres :

  • nom de la fonction définissant l’animation (‘string’)
  • durée de l’animation (‘nombre’ + ‘unité’ (s ou ms))
  • effet de l’animation (ease, linear, ease-in, ease-out, ease-in-out ou fonction cubic-bezier(a,b,c,d))
  • instant de départ de l’animation (‘nombre’ + ‘unité (s ou ms))
  • nombre de fois où l’animation est répétée (‘nombre’)
  • point de départ et comportement de l’animation (alternate ou reverse)
  • point final de l’animation (forwards ou backwards)

La propriété transform peut prendre différentes fonctions :

Rqe : le repère utilisé pour les transformations est le suivant:

  • direction axe des x : de la gauche vers la droite
  • direction axe des y : du haut vers le bas
  • direction axe des z : de l’ecran vers l’oeil

Transitions : la compréhension par le code





<!-- html -->
<button class="button">Bouton</button>


<!-- css  -->
<style>
.button {
    border: none;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
    background-color: #1fb38d;
    /* Nous indiquons quelles propriétés sont modifiées et comment elles le 
    sont */
    transition: color 400ms ease-in, border-radius 400ms ease-out, background-color 1s, 
    transform 200ms cubic-bezier(1,.01,1,.27) 500ms;
}

/* Au hover du bouton, certaines propriétés vont être modifiées */
.button:hover {
    /* La couleur du texte du bouton est modifiée */
    color: #000;

    /* Les bords arrondis sont modifiés */
    border-radius: 30px;

    /* La couleur de fond du bouton est modifiée */
    background-color: #1fb3d7;

    /**
    Le bouton se déplace de 20px selon l'axe des x 
    Le bouton se déplace de 40px selon l'axe des y 
    Le bouton subit une rotation horaire de 40px selon l'axe des z
    Le bouton subit une distorsion de 20 degrés selon l'axe des x
    Le bouton subit une dilatation d'un facteur de 3 selon l'axe des Y
    **/ 
    transform: translateX(20px) translateY(40px) rotateZ(30deg) skewX(20deg) 
    scaleY(3);
}
</style>

Animations : la compréhension par le code





<!-- html -->
<div id="box"></div>


<!-- css -->
<style>
@keyframes boxAnimation {
    from {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(600px);
		background: green;
	}
	to {
		transform: translateY(100px);
        background: blue;
	}
}
#box {
	width: 200px;
	height: 200px;
	background: red;
}
#box:hover {
    animation: boxAnimation 6s linear 1s 4 alternate;
}
</style>