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 :

• translate
• rotate
• skew
• scale
• perspective
• matrix

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>