Propriétés et méthodes d'implémentation de transition en CSS

Le contenu de cet article concerne les propriétés et les méthodes d'implémentation de la transition en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Remarque : IE9 et les versions antérieures d'IE ne prennent pas en charge la transition ! Pour écrire le périphérique de trafic Safari, vous devez ajouter le préfixe -webkit-, etc. !

1. La transition signifie que lorsque la souris passe sur un certain élément, elle peut passer d'un style à un autre.

2. Méthode de mise en œuvre :

1. Spécifiez le style

.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

2. Appelez le style

.panel{
    -webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;

2. durée (le temps par défaut est zéro, s'il n'est pas spécifié, il n'a aucun effet).

3. Syntaxe : transition : durée de la propriété délai de fonction de synchronisation ;

Analyser chaque méthode d'écriture de propriété élément par élément :

1. css Properties)  : none (aucune propriété n'obtiendra l'effet de transition) ; all (par défaut, toutes les propriétés obtiendront l'effet de transition (une liste de noms de propriétés CSS séparés par des virgules qui définissent l'effet de transition de l'application) ;

2. transition-duration (spécifie le temps nécessaire pour terminer l'effet de transition) :time (spécifie le temps nécessaire pour terminer l'effet de transition, la valeur par défaut est 0) ; 🎜>

3. fonction de synchronisation de transition (spécifie la vitesse de l'effet de commutation)  : linéaire (spécifie un effet de transition qui commence et se termine à la même vitesse (par défaut, spécifie un) ; effet de transition qui commence lentement, puis devient plus rapide, puis se termine lentement) ; ease-in (spécifie un effet de transition qui commence à une vitesse lente) ; in-out (spécifie un effet de transition qui commence et se termine à une vitesse lente) ; 0-1)

4. délai de transition (spécifiez quand l'effet de commutation commencera) :time (spécifiez le nombre de secondes ou de millisecondes à attendre avant que l'effet de commutation ne démarre, la valeur par défaut la valeur est 0)

Recommandations associées :

background-orgin en css3 Comment utiliser (avec code)

Comment utiliser le attribut opacity pour ajouter de la transparence à une image de fond en css (code)

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!