CSS3のTransitionアニメーションプロパティの使い方の紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3のTransitionアニメーションプロパティの使い方の紹介

不言

Jun 28, 2018 pm 02:29 PM

css3 transition

この記事では主に CSS3 でのトランジションアニメーション属性の使用法を詳しく紹介し、トランジションアニメーションの使用方法を説明します。興味のある方は参考にしてください。

W3C 標準における CSS3 のトランジションは次のように記述されています。 CSS プロパティ値を一定の時間内にスムーズに遷移させるこの効果は、マウスのクリック、フォーカス、クリック、または要素への変更によってトリガーされ、アニメーション効果で CSS プロパティ値をスムーズに変更します。

Transition 属性

には次の 4 つの値があります: •Transition-property: HTML 要素のどの CSS 属性でトランジショングラデーション処理を実行するかを指定します。この属性には、色、幅、高さなどのさまざまな標準 CSS 属性を指定できます。

•Transition-duration: 属性遷移の継続時間を指定します

•Transition-timing-function: グラデーションの速度を指定します:
1.ease: (徐々に遅くなります) デフォルト値、イーズ関数はベジェ曲線と同等です。 (0.25, 0.1 , 0.25, 1.0);
2. 線形: (均一速度)、線形関数はベジェ曲線 (0.0, 0.0, 1.0, 1.0) と同等です。イーズイン関数はベジェ曲線 (0.42, 0, 1.0, 1.0) と同等です。
4. イーズアウト関数はベジェ曲線 (0, 0, 0.58, 1.0) と同等です。 );
5. イーズインアウト: (加速してから減速)、イーズインアウト関数は 3 次ベジェ曲線 (0.42、0.58、1.0) と同等です。値を使用すると、時間曲線 )、特定の 3 次ベジェ曲線をカスタマイズできます。 4 つの値 (x1、y1、x2、y2) は、曲線上の点 P1 および P2 に固有です。すべての値は [0, 1] の範囲内にある必要があります。そうでない場合は無効になります。
•移行遅延: 遅延時間、つまり移行プロセスの開始にかかる時間を指定します。

ブラウザの互換性

Internet Explorer 9 以前のバージョンは、transition 属性をサポートしていません。 Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Chrome 25 以前および Safari では、接頭辞 -webkit- が必要です。

以下は、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>

ログイン後にコピー

上記のコードでは、マウスが p に移動すると、CSS 属性: width、height、transform、background、opacity にグラデーショントランジション効果が適用されます。。最終的に、CSS スタイルは .animated_p で定義されたスタイルになります。移行プロセスは大まかに次のとおりです。

嫦娥が月に飛ぶ別の例を教えてください。要件は、マウスが上に移動したときです。画像では嫦娥が現れ、マウスを離すと嫦娥が消えます

<!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://p3.qhimg.com/t0134c65e59012a1257.png) 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>

ログイン後にコピー

嫦娥に浮遊効果を持たせるために、transform属性を設定し、opacity属性と組み合わせます。、効果を達成するためにトランジション効果が追加されます:

上記はこの記事の全内容です。お役に立てば幸いです。その他の関連コンテンツについては、にご注意ください。 PHP中国語ウェブサイトです！

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7627

CakePHP チュートリアル

1389

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

Win11 Activation Key Permanent

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

140

Related knowledge

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

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

CSS ヒント: トランジションを使用してホバー状態を保持する Sep 27, 2022 pm 02:01 PM

ホバー状態を保存するにはどうすればよいですか?以下の記事ではJavaScriptを使わずにホバー状態を保持する方法を紹介していますので、ご参考になれば幸いです。

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;」スタイルを追加するだけです。

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

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

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でアニメーションの回転速度を設定する方法 Apr 28, 2022 pm 04:32 PM

CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。

See all articles