記事ディレクトリ
1.アニメーション効果を作成する
CSSアニメーション効果の作成：
パーセンテージ (0%、100%) は、アニメーションがその進行状況に達したときに実行されるスタイル コードを表します。
@keyframes rotateAnimate1 {
0% {
transform: rotateX(45deg) rotateZ(0deg);
}
100% {
transform: rotateX(45deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotateAnimate1 {
0% {
transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
}
100% {
transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
}
}
2. CSSセレクターでの参照
コードは次のとおりです（例）。
-webkit-animation: rotateAnimate1 2s infinite linear;
animation: rotateAnimate1 2s infinite linear;
rotateAnimate1: 自分で書いたアニメーションの名前 上記
2s: 実行時間 (合計時間) を示します
infinite: 再生回数です (infinite は無制限の再生を意味し、再生回数を表す数字に置き換えることもできます)リニア:実行
速度を示します (ここでリニアとは、プロセス全体で均一な速度で実行されることを意味します)
3. パラメータの説明
これは公式のケースです (自分で説明してください)
アニメーション: 名前、期間、タイミング、関数、遅延、反復回数、方向。
アニメーション: (アニメーション名) (アニメーションの実行時間) (アニメーションの実行速度) (アニメーションの実行までの遅延時間) (再生回数) (順番に再生するかどうか);
すべてのパラメータを入力する必要はありません。一部のパラメータが不要な場合は無視してください。入力されていない場合は、レンダリングにデフォルト値が使用されます。！！
パラメータの説明については、便宜的にw3cshoolでの説明を記載します。
アニメーション (アニメーションの呼び出しとパラメータの説明、-webkit-animation と共通)
継続時間 (アニメーションの実行時間)
ここにあなた自身の入力が数秒で表示されます
タイミング関数 (アニメーションの実行速度)
遅延 (アニメーションの開始までの遅延時間)
ここでも、数秒で自分で入力できます。
iteration-count (アニメーションの実行回数)
方向（交代でプレイするかどうか）
これらは CSS アニメーションに関する私の個人的な意見の一部です。矛盾がある場合は修正してください。！！
-webkit-keyframes はFirefox ブラウザでの使用を指します。私は個人的に Google Chrome を使用していますが、これまでのところ問題は発生していません。！！
4. 余談（CSSの一部機能）
1. スケーリング機能
scale(x,y)関数を使用すると、要素は中心原点に従ってオブジェクトをスケーリングできます。1 より大きい場合は拡大され、1 より小さい場合は縮小されます。負の値の場合、最初に反転されてからスケーリングされます。
変換:scale(-2,2);スケーリングを呼び出す
2. 回転機能
回転(x)は、選択した要素の原点中心を通って回転します。正:時計回り、負:反時計回り(2d)です。
transform:rotate(45deg)は回転を呼び出します。45deg は回転角度を表します。0 ～ 360 度、負の値を指定できます。正または負は回転に影響せず、回転の方向のみに影響します。
3.チルト機能
skey(x,y) は、要素を中心位置として x 軸および y 軸を中心に特定の角度で傾けることができます。
変換: skew(-10deg);ここでは skew と呼び、角括弧内に角度を 0 ～ 360 度を入力します。
3 つの関数はトランスフォームで同時に使用でき、適切に組み合わせると予期しない効果が得られます。