Explication détaillée de l'utilisation de la propriété d'animation Transition en CSS3-tutoriel CSS-php.cn

Explication détaillée de l'utilisation de la propriété d'animation Transition en CSS3

高洛峰

Libérer： 2017-03-08 13:27:27

original

1715 Les gens l'ont consulté

La norme W3C décrit la transition CSS3 comme suit : "La transition CSS permet aux valeurs d'attribut CSSde passer en douceur dans un certain intervalle de temps. Cet effet peut se produire lorsque la souris clique, obtient le focus, est cliquée ou se déclenche sur n'importe quel modifie l'élément et modifie en douceur la valeur de la propriété CSS avec effet d'animation "

Les valeurs de l'attribut de transition incluent les quatre suivantes :

. •Transition-property : Spécifiez quel attribut CSS de l'élément HTML pour effectuer le traitement du dégradé de transition. Cet attribut peut être divers attributs CSS standard 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>

Copier après la connexion

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. Finalement, le style CSS devient le style défini dans .animated_p. Le processus de transition est à peu près le suivant :

CSS3中Transition动画属性用法详解

Donnez-moi un autre exemple en ligne de Chang'e volant vers la lune. Les conditions sont les suivantes : lorsque la souris survole l'image. Lorsqu'elle est déplacée vers le haut, 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://www.php.cn/) 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>

Copier après la connexion

Pour pour que Chang'e ait l'effet de flotter vers l'intérieur et vers l'extérieur, l'attribut de transformation est défini, combiné avec l'attribut d'opacité, et l'effet de transition est ajouté. Peut obtenir l'effet :

CSS3中Transition动画属性用法详解 .

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!