Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Avec la publication de la spécification CSS3, les concepteurs Web et les développeurs Web frontaux peuvent utiliser des transitions pour créer de superbes animations CSS en CSS pur sans utiliser de JavaScript.

Ce guide de référence CSS rapide explique comment utiliser les propriétés de transition et fournit des exemples impressionnants et prêts à l’emploi de ce que vous pouvez faire avec les transitions CSS3.

Que sont les transitions CSS?

Introduit il y a quelques années avec la spécification CSS3, Les transitions sont un ensemble de propriétés qui permettent aux développeurs frontaux de modifier facilement les valeurs d’une propriété CSS particulière sur une période donnée.

Cinq propriétés CSS peuvent être utilisées pour créer des transitions. Jetons un coup d’œil à eux:

Propriété CSS la description
transition-property Spécifie la propriété à laquelle la transition doit être appliquée.
Exemple: largeur, fond, bordure….
transition-delay Spécifie le nombre de secondes après lequel la transition commence.
Exemple: 0,2 s
transition-duration Spécifie la durée de la transition.
Exemple: 1s
transition-timing-function Fonction de synchronisation pour spécifier une courbe de vitesse spécifique pour la transition.
Exemple: légèreté
transition Propriété de forme courte pour indiquer les 4 propriétés mentionnées ci-dessus en même temps.
Exemple: Largeur 1s linéaire 1s

Voyons ces propriétés de transition en action. Tout d’abord, considérez ce court morceau de HTML:

<div id="example">An example div</div>

Et les propriétés / valeurs CSS associées:

#example{
  background:red;
  padding: 2em;
  width:40%;
  color:#fff;
  
  transition-property: width; /* Apply transition effect on the width */
  transition-duration: 1s; /* Transition will last 1 second */
  transition-timing-function: linear; /* Timing function to specify a linear transition type */
  transition-delay: 1s; /* Transition starts after 1 second */
}

#example:hover{
  width: 50%;
}

Comme vous pouvez le voir dans l’exemple ci-dessus, la syntaxe CSS est claire et simple. Vous pouvez voir cette transition CSS en action Ici.

Utilisation de transition Propriété sténographique, nous pouvons réellement la remplacer transition-property, transition-duration, transition-timing-function et transition-delay.

La syntaxe CSS est simple. Spécifiez simplement chaque propriété de transition à son tour comme indiqué ci-dessous:

#example{ transition: width 1s linear 1s; }

Avec cette propriété de forme courte, vous pouvez définir les 4 propriétés en même temps.

Pour plus d’informations sur les transitions, consultez le Référence CSS.

À partir de 2019, les propriétés de transition sont bien prises en charge par tous les navigateurs modernes. Les navigateurs plus anciens peuvent toujours prendre en charge cette fonctionnalité si vous utilisez des préfixes de fournisseur tels que -webkit-, -moz-, ou -o-. Prière de se référer à Je peux l’utiliser Plus d’informations sur la compatibilité des navigateurs.

Après cette référence CSS rapide qui montre les propriétés de transition, les effets et les fonctions de synchronisation, examinons des exemples spécifiques de transitions.

Changement de couleur d’arrière-plan en douceur

Propriété abrégée CSS

Un effet simple mais courant sur de nombreux sites Web modernes est un léger changement de la couleur d’arrière-plan tout en flottant. Commençons par ce morceau de HTML absolument simple:

<div class="color">Change Color</div>

Et maintenant, il est temps pour la magie CSS. faites attention au transition Propriété CSS en ligne 12 qui anime la nôtre <div> sur flotteur.

div.color {
    margin: 121px 149px;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
}

div.color:hover {
    background: #53a7ea;
}

La source: Dépôt de concepteurs Web

Transition d’arrière-plan sophistiquée

Fonction de chronométrage

Un exemple plus avancé qui montre à quel point il est facile d’animer un arrière-plan avec des transitions CSS3. Voici le HTML:

<div class="container">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
</div>

Et le code CSS associé dans lequel vous pouvez voir l’utilisation du transition Propriété ainsi que des transformations CSS pour des animations plus sophistiquées.

.circle {
	border-radius: 50%;
	left: calc(50% - 6.25em);
	top: calc(50% - 12.5em);
	transform-origin: 50% 12.5em;
	width: 12.5em;
	height: 12.5em;
	position: absolute;
	box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}

.one,
.three {
	background: rgba(142, 92, 205, .75);
	transition: background 1s ease-in;
}

.two,
.four {
	background: rgba(236, 252, 100, .75);
}


.one {
	transform: rotateZ(0);
}

.two {
	transform: rotateZ(90deg);
}

.three {
	transform: rotateZ(180deg);
}

.four {
	transform: rotateZ(-90deg);
}

.circle:hover {
  background: rgba(142, 92, 205, .25);
}

La source: Flavio Copes

Cadres dégradés CSS et boutons d’angle arrondis

Transformations et transitions CSS

Voici un bouton avancé super sympa qui est entièrement fait de CSS3. Le code HTML est très simple:

<a class="btn" href="https://catswhocode.com/css-transition/#">
  <span>A button!</span>
</a>

Le code CSS est un peu plus complexe et montre toute la puissance des transitions CSS3:

body {
  background: #e7e8e9;
  padding: 40px;
}

.btn {
	background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
	border-radius: 40px;
  box-sizing: border-box;
	color: #00a84f;
	display: block;
	font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/
	height: 80px;
	letter-spacing: 1px;
	margin: 0 auto;
	padding: 4px;
	position: relative;
  text-decoration: none;
	text-transform: uppercase;
	width: 264px;
	z-index: 2;
}

.btn:hover {
	color: #fff;
}

.btn span {
	align-items: center;
	background: #e7e8e9;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
}

.btn:hover span {
	background: transparent;
}

Source: Amber Weinberg

Différentes transitions pour Hover On / Hover Off

Transitions CSS: tutoriel et exemples 1

Les transitions peuvent être différentes pour les états hover-on et hover-off, comme indiqué dans le code HTML suivant.

<a id="button" href="https://catswhocode.com/css-transition/#">Buy Now!</a>

… et CSS:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   transition: border-radius 2s;
}

La source: Chris Coyier

Déplacez le pointeur de la souris sur un élément pour en influencer un autre

Transitions CSS: tutoriel et exemples 2

Concluons ce résumé avec un exemple intéressant de la façon dont nous pouvons déplacer un élément pour en affecter un autre. Commençons par créer deux conteneurs HTML:

<div id="box1">#box1</div>
<div id="box2">#box2</div>

Regardons maintenant le CSS:

#box2 {
    position: absolute;
    left: 120px;
    background: blue;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
  #box1:hover + #box2 {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    left: calc(100% - 102px);
    background: yellow;
}

La source: L’art du web

Questions fréquemment posées

Référence CSS

Quelle est la différence entre la transformation et la transition en CSS?

Les transitions CSS vous permettent de modifier facilement les propriétés au fil du temps à l’aide des fonctions de synchronisation. D’autre part, les transformations CSS permettent la transformation d’éléments CSS dans un espace bidimensionnel ou tridimensionnel.

Que sont les fonctions de chronométrage CSS?

Une fonction de synchronisation CSS est utilisée pour permettre à une transition de changer de vitesse au fur et à mesure de sa progression en utilisant le transition-timing-function et animation-timing-function Propriétés de transition.

Que sont les fonctionnalités de facilitation CSS?

Les fonctions de facilité indiquent le taux de changement d’un paramètre au fil du temps, vous pouvez donc ajouter plus de réalisme à vos transitions.



Source link

Recent Posts