css3 を使用してスタイルを通じて Web ページ要素をアニメーション化する-CSSチュートリアル-php.cn

css3 を使用してスタイルを通じて Web ページ要素をアニメーション化する

零下一度

リリース： 2017-04-22 13:41:22

オリジナル

2319 人が閲覧しました

css3 を使用すると、JavaScript や Flash を使用せずにスタイルを通じて Web 要素をアニメーション化でき、Web サイトをよりクールにすることができます。

css3 トランジション

トランジションアニメーション（trainsition）属性は要素スタイルの遷移を実現できます。 trainition がサポートするブラウザは ie10、firefox、chrome、opera です。

まず、trainition のいくつかのプロパティを見てみましょう:

trainsition-property: アプリケーショントランジションの CSS 属性名を指定します。

trainsition-duration: 費やされる過剰な時間を指定します。

trainsiton-timing-function: 遷移時間曲線を指定します。

trainsition-delay: 遷移が開始されるタイミングを指定します。

まず、demo.css に

p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}

p:hover
{
width:300px;
height:200px;
}

ログイン後にコピー

を書きます。赤い p ブロックにマウスを移動します。赤いブロックの長さと幅がゆっくりと増加します。これは、トランジションの最も単純な実装です。

注: 移行時間が設定されていない場合、デフォルトでは 0 になります。ただトランジション効果はありません。

私たちがより頻繁に使用する方法は、次のように、js を介してスタイルを追加して、さまざまなアニメーションの遷移を練習することです:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  href="demo.css"/>
</head>
<body>

<p></p>

</body>
</html>

ログイン後にコピー

変更されたコードでは、マウスが移動するときに jquery を介してオーバースタイルが追加されます。 over、in pスタイルにtransition属性が設定されているため、マウスを離すとoverスタイルが削除され、トランジションアニメーションが実装されます。

ただし、上記ではスタイルの変更が実装されていますが、その変更は初期状態から最終状態への変更であり、これには大きな制限があることがわかります。そのため、中間状態の変換ができることを期待しています。このとき、キーフレームアニメーション (@keyframes) が使用されます:

基本的な形式は次のとおりです:

@keyframes 名前｛

時点｛要素ステータス｝

....

｝

たとえば、

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
   background:red;
   width:200px;
   height:200px;
   transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
 
<body>
<p 
</p>
<script> 
$(&#39;p&#39;).hover(function(){
  $(&#39;p&#39;).addClass(&#39;over&#39;);},
  function(){
    $(&#39;p&#39;).removeClass(&#39;over&#39;);
});
</script> 
</body>
</html>

ログイン後にコピー

を使用してキーフレームアニメーションを定義し、それを適用する要素にバインドできます。たとえば、次のとおりです。

@frames chgground{
    from{ backgroud:red;}
    to{backgroud:yellow;}
}

ログイン後にコピー

アニメーションを使用してバインドします。要素は次のとおりです:

p chgbackground のアニメーションでは、パーセンテージを使用してキーフレームの状態を 0% と %100 で指定することもできます。次のコード

p{
animation:chgbackground 3s;
}

ログイン後にコピー

t は、このコードによって実現できます。 0% から 50% および 50% から 100% までの異なるグラデーション効果があります。

animate.css を使用するには、animate.css をダウンロードしてファイルを参照し、さまざまな効果を実現するために必要な特定のアニメーションクラス名を追加します。

以上がcss3 を使用してスタイルを通じて Web ページ要素をアニメーション化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。