過度なアニメーションやジョギング効果を利用したCSS3 ケーススタディ

2022-01-17 08:59:17

トランジション遷移。

四つの小さな属性

<テーブル属性意味トランジションプロパティどのプロパティを遷移させるか遷移時間アニメーションの時間トランジションタイミング機能アニメーションの変化曲線（ジョギング効果）トランジションディレイ遅延時間

transition overプロパティは、CSS3の非常にカラフルな機能で、overがスタイル間で変化する際に、要素に自動的に"間隔アニメーション"を追加することができます。

互換性 IE10に対応し始めた、モバイルの互換性は良好
Webページのアニメーション効果は、基本的にJavaScriptのタイマーで実装されていた時期もありましたが、現在は徐々にCSS3オーバーを使用するようにシフトしています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> animated-transition</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

はプラス属性値の遷移が必要な属性で、最初の値は変化する属性です

どの属性が遷移に参加できるか

幅、高さ、左、上、ボーダー半径など、すべての数値属性がトランジションに参加することができます。
背景色と文字色の両方を遷移させることができる
すべてのモーフ（2D、3Dとも）をトランジションさせることができる

をすべて表示します。

すべての属性が遷移に関わるように、allを記述します。
トランジション：すべて5s線形0s。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> animated-transition</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: black;
            transition: width 5s linear 0s;
        }
        .box:hover {
            width: 500px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 5s linear 0s;
        }
        .box1:hover {
            width: 400px;
            height: 200px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

トランジションジョグ効果。

ジョギングパラメータ

トランジションの3つ目のパラメータは、ジョギングパラメータで、変化曲線の速度である
トランジション：幅1s 直線0s。

ジョギングでよく使われるパラメータ

副属性

transition-timing-function: ease.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> animated-transition</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            border:1px solid black;
        }
        .box1 p{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: relative;
            left: 0;
            margin-bottom: 10px;
            transition: left 5s linear 0s;
        }
        .box1 p:nth-child(2) {
            transition-timing-function: ease;
        }
        .box1 p:nth-child(3) {
            transition-timing-function: ease-in;
        }
        .box1 p:nth-child(4) {
            transition-timing-function: ease-out;
        }
        .box1 p:nth-child(5) {
            transition-timing-function: ease-in-out;
        }
        .box1:hover p {
            left: 100px;

        }
    </style>
</head>
<body>
    <div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

ベッセル曲線。

ウェブサイト https://cubic-bezier.com/可以生成贝塞尔曲线アニメーションジョグパラメータをカスタマイズ可能

<リンク

この記事は、過剰なアニメーションとジョギング効果を使用してCSS3に関するすべてのものです、より関連する過剰なアニメーションとジョギング効果を使用してCSS3コンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてくださいあなたは将来よりスクリプトハウスをサポートしていますことを願っています！.