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

零下一度
リリース: 2017-04-22 13:41:22
オリジナル
2283 人が閲覧しました

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 をダウンロードしてファイルを参照し、さまざまな効果を実現するために必要な特定のアニメーション クラス名を追加します。

<script>$('p' ).addClass(' shake');</script>要素を揺さぶる効果を簡単に追加できます。



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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート