Maison > Article > interface Web > Introduction à l'utilisation de la propriété d'animation Transition en CSS3

Introduction à l'utilisation de la propriété d'animation Transition en CSS3

不言original: 2018-06-28 14:29:481996parcourir

Cet article présente principalement en détail l'utilisation de l'attribut d'animation de transition dans CSS3 et vous apprend à utiliser l'animation de transition. Les amis intéressés peuvent se référer au

Standard W3C pour la transition CSS3. La transition permet aux valeurs des propriétés CSS de passer en douceur dans un certain intervalle de temps. Cet effet peut être déclenché par des clics de souris, le focus, un clic ou toute modification apportée à l'élément, et anime en douceur l'effet modifie la valeur de la propriété CSS. . "

La valeur de l'attribut de transition comprend les quatre éléments suivants :

•Transition-property : Spécifie quel attribut CSS de l'élément HTML doit faire la transition. Traitement du dégradé, cet attribut peut être divers attributs CSS standards tels que la couleur, la largeur, la hauteur, etc.
•Transition-duration : Spécifiez la durée de la transition de l'attribut
•Transition-timing-function : Spécifiez la vitesse du dégradé :
1. est équivalent à la courbe de Bessel Er (0,25, 0,1, 0,25, 1,0) ;
2. linéaire : (vitesse uniforme), la fonction linéaire est équivalente à la courbe de Bézier (0,0, 0,0, 1,0, 1,0) ; easy-in : (Accélérer), la fonction easy-in est équivalente à la courbe de Bézier (0,42, 0, 1.0, 1.0)
4. la courbe de Bézier (0, 0, 0,58, 1,0) ;
5. facilité d'entrée-sortie : (accélérer puis décélérer), la fonction facilité d'entrée-sortie est équivalente à la courbe de Bézier (0,42, 0, 0,58) , 1.0);
6 , cubique-bézier : (Cette valeur permet de personnaliser une courbe temporelle), une courbe cubique-bézier spécifique. Les quatre valeurs (x1, y1, x2, y2) sont spécifiques aux points P1 et P2 de la courbe. Toutes les valeurs doivent être comprises dans la plage [0, 1], sinon elles seront invalides.
•Transition-delay : Spécifiez le temps de retard, c'est-à-dire le temps qu'il faut pour démarrer le processus de transition.

Compatibilité des navigateurs

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

Internet Explorer 10, Firefox, Opera et Chrome prennent en charge l'attribut de transition. Chrome 25 et versions antérieures et Safari nécessitent le préfixe -webkit-.

Ce qui suit est un exemple pour illustrer l'utilisation de la transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition演示1</title>
    <style type="text/css">
        .animated_p {   
            margin: 100px auto;   
            width:100px;   
            height:60px;   
            background:#92B901;   
            /*简写属性*/   
            -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */   
            /*每个属性分开写*/   
            transition-property:width,height,transform,background,opacity;   
            transition-duration:1s,1s,1s,1s,1s,1s;   
            -webkit-border-radius:5px;   
            border-radius:5px;   
            opacity:0.4;   
        }   
        .animated_p:hover {   
            -moz-transform: rotate(360deg);   
            -webkit-transform: rotate(360deg);   
            -o-transform: rotate(360deg);   
            transform: rotate(360deg);   
            opacity:1;   
            background:#1ec7e6;   
            width:200px;   
            height:120px;   
        }   
    </style>
</head>
<body>
<p class="animated_p"></p>
</body>
</html>

Lorsque la souris se déplace vers p dans le code ci-dessus, les attributs CSS : width, height Des effets de transition, de transformation, d'arrière-plan, d'opacité et de dégradé se produisent. Enfin, le style CSS devient le style défini dans .animated_p. Le processus de transition est à peu près le suivant :

Donnez-moi un autre exemple en ligne de Chang'e volant vers la lune. La condition est la suivante : lorsque la souris est déplacée vers l'image, Chang'e apparaît, et lorsqu'elle est éloignée, Chang'e disparaît

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>transition演示2</title>
    <style type="text/css">
        body{   
          color: #fff;   
          background:#000;   
        }   
        .change{   
          display:block;   
          width:400px;   
          height:400px;   
          background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;   
          background-size:cover;   
          border:1em solid rgba(255,255,255,.8);   
          margin:50px auto;   
        }   
        .change img{   
          display:block;   
          width:300px;   
          height:284px;   
          opacity:0;   
          -webkit-transform:translate(-100px,-100px);   
          transform:translate(-100px,-100px);   
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;   
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;   
        }   
        .change:hover img{   
          -webkit-transform:translate(0px,0px);   
          transform:translate(0px,0px);   
          opacity:1;   
        }   
    </style>
</head>
<body>
    <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
        <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
    </a>
</body>
</html>

Afin de faire changer Chang'e. Nous avons pour effet de flotter vers l'intérieur et l'extérieur, l'attribut de transformation est défini et combiné avec l'attribut d'opacité, ajoutez L'effet de transition peut obtenir l'effet :

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

Recommandations associées :

10 Effets de chargement implémentés par CSS3

Propriétés d'animation de transition et d'animation en CSS3 Introduction à l'utilisation

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：10 effets de chargement implémentés par CSS3Article suivant：10 effets de chargement implémentés par CSS3

Articles Liés

Voir plus