À propos de CSS3 utilisant l'attribut transition pour obtenir des effets de transition-tutoriel CSS-php.cn

À propos de CSS3 utilisant l'attribut transition pour obtenir des effets de transition

不言

Libérer： 2018-06-20 18:05:12

original

2409 Les gens l'ont consulté

Le nouvel attribut transform en CSS3 peut réaliser l'effet de transition des éléments pendant le processus de transformation et réaliser une animation de base. Cet article vous présentera comment CSS3 utilise l'attribut de transition pour obtenir des effets de transition. Les amis qui en ont besoin peuvent se référer à cet article

Explication détaillée de l'attribut<.>

Le but de l'attribut de transition est de laisser certaines propriétés CSS (telles que l'arrière-plan) apparaître avec un effet de transition fluide. Il s'agit d'une propriété fusionnée, composée des quatre propriétés suivantes :

transition-property : Définissez la propriété CSS de la transition de l'application, telle que l'arrière-plan.
transition-duration : Définissez le temps nécessaire à l'effet de transition. La valeur par défaut est 0.
transition-timing-function : Définissez la courbe temporelle de l'effet de transition. La valeur par défaut est « facilité ».
transition-delay : Spécifie quand l'effet de transition commence. La valeur par défaut est 0.

Exemple :

 button{
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
 }

Copier après la connexion

Lors de la définition de l'attribut de transition, la propriété de transition et la durée de transition sont requises , les deux autres sont facultatifs.

transition-property et transition-duration

transition-property est utilisé pour spécifier les propriétés CSS pour l'application des effets de transition. Ces propriétés incluent (. peut ne pas être complet ):

largeur
hauteur
couleur
fond (couleur, image, position)
transformer (dans le prochain post)
bordure (couleur, largeur)
position (haut, bas, gauche, droite)
texte (taille, poids, ombre, espacement des mots)
marge
remplissage
opacité
visibilité
z-index
all

L'attribut transition-duration est utilisé pour définir la temps d'effet de transition de l'attribut spécifié, qui peut être en secondes (s) ou en millisecondes (ms).

transition-delay et transition-timing-function

transition-delay est utilisé pour définir l'heure de début de l'effet de transition, la valeur par défaut est 0, vous pouvez C'est en secondes (s) ou en millisecondes (ms). Si le délai de transition est un nombre négatif, cela signifie que l'effet de transition commence tôt.

la fonction de synchronisation de transition est utilisée pour définir les effets de transition. Ces effets incluent :

facilité - lent au début, rapide au milieu, lent au milieu. fin
ease-in - effet de fondu entrant, entrée lente et sortie rapide
ease-out - effet de fondu sortant, entrée rapide et ralentissez.
ease-in-out - Commencez lentement et terminez lentement
cubic-bezier(n,n,n,n ) - Définissez la vôtre dans la valeur de la fonction cubique-bézier. Les valeurs possibles sont des valeurs numériques comprises entre 0 et 1

Exemple :

 button{
   transition: background 1s ease-in-out 2s;
   -webkit-transition: background 1s ease-in-out 2s; /* Safari */
 }

Copier après la connexion

Attributs multiples

Pour plusieurs attributs, les effets de chaque attribut sont séparés par des virgules :

  button{
     transition: background 1s ease-in-out 2s, width 2s linear;
     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
   }

Copier après la connexion

Compatibilité

Internet Explorer 10, Firefox, Opera et Chrome prennent en charge l'attribut de transition.

Safari prend en charge un attribut alternatif -webkit-transition.

Internet Explorer 9 et les navigateurs antérieurs ne prennent pas en charge l'attribut de transition.

Déclencheur

Il est à noter que l'effet de transition nécessite des attributs qui ont été définis auparavant, et l'effet de transition est appliqué via le déclenchement, tels que : survol, :focus et :active etc.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS3 pour obtenir un effet d'ombre de texte d'ombre de texte en constante évolution

Animation CSS3 pour implémenter un Effets de carrousel de diaporama simples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!