简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の概要メモ: 変換、トランジション、アニメーションの例

CSS の概要メモ: 変換、トランジション、アニメーションの例

青灯夜游
青灯夜游転載
2018-10-09 17:00:402471ブラウズ

この記事ではCSSの変形・遷移・アニメーションの例を中心に紹介していますので、参考になれば幸いです。

1. トランジション transition

トランジション プロパティの使用法: transition :ransition-propertytransition-duration トランジション-timing-function transition-lay

一緒に指定することも、個別に指定することもできます

transition-property: 遷移するプロパティ (幅、高さなど)、すべて変更されます。

Transition-duration: 経過時間、単位は s または ms

transition-timing-function: アニメーション タイプ (モーション エリア カーブ) を指定します。モーション カーブには次のタイプがあります

ease=>徐々に速度を落とす (デフォルト値) Linear=>一定速度ease-in=>加速ease-out=>減速ease-in-out=>まず加速してから減速

transition-delay 遅延時間、単位は s または ms

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        p {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        p:hover {
            width: 500px;
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

結果は次のようになります。マウスを上に上げると、すぐに変更が完了するわけではありませんが、遷移は完了します。

2. 変換transform

(1)、 2D 変形

(a) Move translation(x,y)

Movement はピクセル値またはパーセンテージを指定できます。 注: 指定されたパーセンテージは、自身のサイズに対するパーセンテージです。そのため、ボックスの位置を設定するときに中央揃えを使用できます (左に設定して 50% にしてから、-50% 移動します)。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        p:active {
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

クリックするとボックスが移動しました。配置されたボックスを中央に配置するために使用されるコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    </style>
</head>

<body>
    <p class="fa">
        <p class="son"></p>
    </p>

</body>

</html>

結果は次のようになります

##(b) Scale スケール(x, y)

x,y を 1 より大きくすると拡大し、1 より小さいと縮小します。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        p:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <p>

    </p>
</body>

</html>

(c) Rotate 回転(x 度)

xx は度の値を指定します。正の数値は時計回りの回転、負の数値は反時計回りの回転です。

Rotation では、

transform-origin

を使用して回転の中心点を指定できます。Transform-origin では、左上右下の特定のピクセル値を指定することもできます。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        p:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

(d) 傾斜スキュー (x 度、y 度)

x,y はそれぞれ x 方向と y 方向の傾斜角を指定します。 you can は負の数です。 y 値は、書き込まれない場合、デフォルトで 0 になります。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        p:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

(2) 3D変形

(a) 回転(rotateX,rotateY,rotateZ)

3D 回転は 2D と似ていますが、一方は 2 次元座標に基づいており、もう一方は 3 次元座標に基づいている点が異なります。 3 つの値は同時に指定することも、個別に指定することもできます。 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        p:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

(b) 移動 (translateX、translateY、translateZ)

3D 移動は、xy 方向の移動については 2D 移動と一致します。 z方向の動きのみが異なります。 Z 方向への移動は、実際には距離が遠くなり、距離が近づくことを意味します。したがって、Web ページに表示される結果は、オブジェクトが近づくと大きくなり、オブジェクトが遠くなると小さくなります。

Z ラインの動きを有効にするには、まず視点 (目と画面の間の距離) を設定する必要があります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
            /* 数值越小说明眼睛离的越近 */
        }
        
        p {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        p:hover {
            transform: translate3d(0, 0, 200px);
        }
    </style>
</head>

<body>
    <p>

    </p>
</body>

</html>

##3. アニメーション

animation (1)、animation:

animation- name || アニメーション- 期間|| #アニメーション- # #タイミング関数 || アニメーション- 遅延 || アニメーション- 反復回数|| アニメーション- 方向| | animation- fill-mode animation-name: アニメーション名 (アニメーションは次のように定義されます)自分自身で @keyframes を使用)animation-duration: 期間 animation-timing-function: トランジションのモーション カーブに似たモーション カーブ。 animation-delay: 遅延時間

animation-iteration-count: ループ数 (infinite は無限ループ)

animation-direction: 反転するかどうか (アニメーションは by によるものです。エンディングは上下逆さまに配置されています)

animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态）

animation-play-state：设置动画状态 running 开始|paused 暂停

（2）、@keyframes 自定义动画

格式如下

@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}

可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，CSS3视频教程！

相关推荐：

php公益培训视频教程

CSS在线手册

CSS3在线手册

div/css图文教程

以上がCSS の概要メモ: 変換、トランジション、アニメーションの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php css css3 count 循环 Property function transform transition animation
声明：
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS3 で Transform skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法次の記事：CSS3 で Transform skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法

関連記事

続きを見る