CSS3のトランジション機能の使い方は？-htmlチュートリアル-php.cn

CSS3のトランジション機能の使い方は？

零下一度

リリース： 2017-06-28 09:40:53

オリジナル

2692 人が閲覧しました

1.transition関数

transition属性の使用方法:transition:propertydurationtiming-function;

ここで、propertyはどのプロパティがスムーズに遷移されるかを示し、durationはプロパティ値のスムーズな遷移が完了するまでにかかる時間を示します。およびtiming-functionは、プロパティ値のスムーズな移行を完了するのにかかる時間を示します。どのような方法でスムーズな移行を行うか。

複数のスムーズな遷移の例:

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5    
 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     
 <title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12     #test{13         
 width: 500px;14         height: 500px;15         background-color: yellow;16         /*css动画*/17         
 transform: rotate(0);18         -webkit-transition: transform 0.5s linear, width 0.5s linear;19         -moz-transition: transform 0.5s linear, width 0.5s linear;20         -ms-transition: transform 0.5s linear, width 0.5s linear;21         -o-transition: transform 0.5s linear, width 0.5s linear;22         transition: transform 0.5s linear, width 0.5s linear;23     }24     #test:hover{25         width: 200px;26         transform: rotate(180deg);27     }28 </style>29 </body>30 </html>

ログイン後にコピー

2.アニメーション関数

使用例:

 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     
 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     
 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     
 <title>测试</title> 8 </head> 9 <body>10 <div id="test"></div>11 <style>12 /*animation动画*/13     
 @-webkit-keyframes colorChange {14         0%{15             background-color: deepskyblue;16         }        
 50%{18             
 background-color: red;19         }20         
 100%{21             background-color: deepskyblue;22         }23     }24     
 #test{25         width:500px;26         height: 500px;27         
 background-color: deepskyblue;28     }29     #test:hover{30         animation-name: colorChange;         
 animation-duration: 1s;32         animation-timing-function: linear;33     }34 </style>35 </body>36 
 </html>

ログイン後にコピー

アニメーションを実装するメソッド:

メソッド	属性値の変化速度
リニア	アニメーションの最初と最後で同じ速度で変化します
イーズイン	アニメーションは非常にゆっくりと始まり、その後カーブの値に沿って速度が上がります
イーズ-アウト	アニメーションは非常に速く始まり、カーブ値に沿って遅くなります
イーズ	アニメーションは非常にゆっくりと始まり、その後カーブ値に沿ってスピードアップし、その後カーブ値に沿って遅くなります
イーズ-in-out	アニメーションは非常にゆっくりと始まり、その後カーブ値に沿って速度が上がり、その後カーブ値に沿って遅くなります

以上がCSS3のトランジション機能の使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。