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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

零下一度

Apr 22, 2017 pm 01:41 PM

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

Vue ページ遷移アニメーションの実装と一般的なアニメーション効果 Jun 09, 2023 pm 04:11 PM

Vue は、データ駆動型のアプローチを使用する人気の JavaScript フレームワークで、開発者が強力な対話性と美しいデータプレゼンテーションを備えた単一ページの Web アプリケーションを構築するのを支援します。 Vue には多くの便利な機能が組み込まれており、その 1 つがページ遷移アニメーションです。この記事では、Vue のトランジションアニメーション機能の使用方法と、最も一般的なアニメーション効果について説明します。 Vue のページ遷移アニメーションの実装 Vue のページ遷移アニメーションは、Vue の <transition> と <tr によって行われます。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

Webページ要素を取得するJavaScriptの詳細説明 Apr 09, 2024 pm 12:45 PM

回答: JavaScript には、ID、タグ名、クラス名、CSS セレクターの使用など、Web ページ要素を取得するためのさまざまな方法が用意されています。詳細説明: getElementById(id): 一意の ID に基づいて要素を取得します。 getElementsByTagName(tag): 指定されたタグ名の要素グループを取得します。 getElementsByClassName(class): 指定されたクラス名の要素グループを取得します。 querySelector(selector): CSS セレクターを使用して、最初に一致した要素を取得します。 querySelectorAll(selector): CSS セレクターを使用して一致するものをすべて取得します

uniapp を使用してページ遷移アニメーション効果を実現する Nov 21, 2023 pm 02:38 PM

モバイルインターネットの急速な発展に伴い、クロスプラットフォームアプリケーションを構築するために uniapp を使用するプログラマーが増えています。モバイルアプリケーション開発において、ページ遷移アニメーションはユーザーエクスペリエンスを向上させる上で非常に重要な役割を果たします。ページ遷移アニメーションを通じて、ユーザーエクスペリエンスを効果的に向上させ、ユーザー維持率と満足度を向上させることができます。したがって、uniapp を使用してページ遷移アニメーション効果を実現する方法と、具体的なコード例を紹介しましょう。 1. uniapp の紹介 Uniapp は、DCloud 開発チームによって立ち上げられた基本製品です。