コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

青灯夜游
リリース： 2018-10-09 17:08:54
転載
2478 人が閲覧しました

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

関連ラベル：
css アニメーション 変形 遷移
ソース：jb51.net
前の記事：CSS3 で Transform skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法 次の記事：CSSを使用して複数列の等高レイアウトを設定する方法の例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート