ステップ 1:
アニメーションを定義します。名前はメソッド名と同様にさまざまです
@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*/}}方法里面还有很多写法：
如：
/* 定义css方法，名字叫消失 Hides a leaf towards the very end of the animation */@-webkit-keyframes fade{ /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */ 0% { opacity: 1; } /*初始状态 透明度为1*/ 95% { opacity: 1; }/*中间状态 透明度为1*/ 100% { opacity: 0; }/*结尾状态 透明度为0*/
}
/* 定義メソッドは Drop と呼ばれます 葉を y 軸の -300 ピクセルから 600 ピクセルに移動させます */
@-webkit-keyframes Drop
{
/* 葉を y 軸の -300 ピクセルに移動しますアニメーション開始時の軸 */
0% { -webkit-transform: translation(0px, -50px) }/* 降下開始時の要素の位置、x 方向の変位を設定します。要素の y 方向の変位 b */
/* アニメーションの終了時に葉を y 軸の 600 ピクセルに移動 */
100% { -webkit-transform: translation(0px, 1136px) ); }/* ドロップの最後に、要素の位置を設定します。要素 x 方向の変位 a、y 方向の変位 b */
}
/* 時計回りと呼ばれるメソッドを定義します。 リーフを -50 から 50 まで回転します。 2D 空間で 50 度 */
@-webkit-keyframes 時計回りSpin
{
0% { -webkit-transform: 回転(-50度) }
100% { -webkit-transform: 回転(50度); } }
/* 葉を反転し、2D 空間で 50 度から -50 度に回転させる反時計回りというメソッドを定義します */
@-webkit-keyframes counterlockwiseSpinAndFlip
{
0% { -webkit-transform:scale(- 1, 1) 回転(50度); }
100% { -webkit-transform:scale(-1, 1) 回転(-50度) }
}
rotate
要素を時計回りに設定します 回転の角度、使用法は次のとおりです:Transform:rotate(x);
パラメータxは角度番号でなければなりませんdeg または 0 で終わり、逆方向を示す負の数を指定できます。
scale
要素の拡大率または縮小率を設定します:transform:scale(a); 要素のx方向をa倍、y方向にb倍に拡大します
Transform:scaleX(a) ); y 方向は変えずに要素を x 方向に a 回拡大縮小します
Transform:scaleY(b); x 方向は変えずに要素を b 回拡大縮小します
translate
Set要素の変位、使用法は次のとおりです: Transform: translation(a, b); 要素の x 方向の変位、y 方向は変更されません
Transform: translationY(b); y 方向に b だけ傾き、x 方向は変化しません
skew
使用法には以下が含まれます:
変換: skew(a, b); x 方向に角度 a、y 方向は時計回りに角度 b だけ傾きます 変換: skewX(a); 要素は x 方向に角度 a だけ反時計回りに傾き、y 方向は変化しません
変換: skewY(b); 角度 b を時計回りに傾けても、方向は変わりません
上記のパラメータは、deg または 0 で終わる角度数値である必要があり、逆方向を示すには負の値を指定できます。
matrix
要素の変換行列を設定します、行列変換は複雑すぎるので今回は省略します。
origin
要素のぶら下がり点を設定します:
transform-origin: a b;値の A と b には、長さの値、% で終わるパーセンテージ、または left、top、right、bottom の 4 つの値を指定できます。
移行
transition-property
指定transition效果作用的CSS属性，其值是CSS属性名。
transition-duration
动画效果持续的时间，其值为以s结尾的秒数。
transition-timing-function
指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：
transition-delay
动画效果推迟开始执行的时间，其值为以s结尾的秒数。
animation
CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下：
@keyframesNAME {
a% {
/*CSS属性*/
}
b% {
/*CSS属性*/
}
...
}
NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。
animation-name
指定选用的动画的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。
animation-direction
设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。
前缀
因为CSS3还没有正式发布，所以各种浏览器对它的支持也不尽相同。所以在设置CSS3属性（包括@开头的新属性）的时候通常需要对其添加浏览器标识的前缀，如-webkit- 表示Webkit内核的浏览器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。无视IE吧，在IE上的实现通常还是要用到滤镜，而不是CSS3。
第三步：
最后，要给div元素用上：如下
在ID或类中增加如下的动画代码
#box{-webkit-animation-name: fadeIn; /*动画名称*/-webkit-animation-duration: 3s; /*动画持续时间*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/}通过上面的代码即可实现淡入淡出的动画效果，代码具体的含义已在注释中注明。
案例：
#leafContainer > div
{
position: absolute;
width: 100px;
height: 100px;
/* We use the following properties to apply the fade and drop animations to each leaf.
Each of these properties takes two values. These values respectively match a setting
for fade and drop.
*/
-webkit-animation-name: fade, drop; /*动画名称*/
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
-webkit-animation-timing-function: linear, ease-in;/* 变化速率函数，取的是贝塞尔曲线，这个是匀速，加速 */
}
#leafContainer > div > img {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-name: fade, drop; /*动画名称*/
-webkit-animation-iteration-count: infinite;/* 设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。 */
-webkit-animation-direction: alternate;/* 设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放） */
-webkit-animation-timing-function: ease-in-out; /* 变化速率函数，取的是贝塞尔曲线，这个是加速再减速 */
-webkit-transform-origin: 50% -100%;/* 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。这里像个钟摆 */
}
有一些参考代码：
代码如下:
CSS代コード：
animation.css
代码如下:
div {
width: 80px ;
高さ:30px;
line-height:30px;
text-align:center;
background:#06F;
color:#fff;
font-family:Arial、Helvetica、sans-serif;
-webkit-border -半径: 10px;
マージン: 5px;
}
css3アニメーション画とjqueryのアニメーション画の優劣比：
CSS3 アニメーションは、2D、3D、および通常のアニメーション属性インターフェイスを提供します。CSS3 アニメーションは C 言語で記述されているため、その効率は絶対に高くなります。 jsでシミュレーションしたアニメーションですが、本当にそうなのでしょうか？
テストの結果、CSS3 アニメーションと JavaScript シミュレーション アニメーションには次の違いがあることがわかりました:
1\ CSS 3D アニメーションは js で実装できません
CSS3 の 3D アニメーションは、次のような点で非常に強力な機能です。動作原理 3 次元空間にあるため、js は CSS3 のような 3D アニメーションをシミュレートできません。 もちろん、この 3D アニメーションが幅広い実用的なシナリオを備えているかどうかは検討する価値があります...
2\ CSS 2D マトリックス。アニメーションは js よりも効率的です。 margin と left、top を使用してシミュレートされた Matrix アニメーション
CSS3 の 2D アニメーションは、scaling\deformation\x-axis\y-axis などの 2D Matrix Transform の変更を参照します。 もちろん、js ではできません。変形アニメーションを行います。座標アニメーションを例に挙げます。テストの結果、CSS3 変換を使用して TranslationXY アニメーションを実行すると、JS の左位置および右位置よりも 700mm 近く速くなり、視覚的にも JS アニメーションよりもはるかにスムーズになることがわかりました。
3\ CSS3 の他の通常のアニメーション プロパティの効率は、JS でシミュレートされたアニメーションの効率よりも低くなります。
ここでの通常のアニメーション プロパティとは、高さ、幅、不透明度、境界線の幅、色...を指します。 Android HTC 上でのテストでは、DOM 要素を height:0 から height:100 に変更し、jQuery animate と CSS3 のトランジションとアニメーションを使用しました。その結果、CSS3 のトランジションとアニメーションは両方とも jQuery animate よりも 500mm 遅いことがわかりました。他の通常のアニメーション プロパティは、jQuery animate! よりも 400 ～ 500mm 遅くなります。
上記は、CSS3 アニメーションと jQuery アニメーションに関して行ったいくつかの簡単なテストです。テスト結果もコメントに記載していただければ幸いです。次にアニメーションイベントを見てみましょう。
ページ上でアニメーションが実行されるたびに、animationStart と animeEnd の 2 つのイベントが必要になる場合があります。携帯電話ではアニメーションの使用は推奨されません。アニメーション実行中に他のイベントも実行します。
js を使用してアニメーションをシミュレートするには、次のステップをより適切に実行するために、開発者がこれらのイベント インターフェイスを作成する必要はありません。これらのイベント インターフェイスは、ブラウザー自体がすでに提供しています。たとえば、ブラウザには webkitTransitionStart、webkitTransitionEnd、webkitAnimationStart、webkitAnimationDuration、および webkitAnimationEnd イベント インターフェイスが用意されており、開発者はこれらのイベントを簡単に使用できます。
上記の議論を通じて、次の結果が得られます:
js アニメーションと css3 アニメーションのどちらを使用するかについては、開発者はさまざまなニーズに応じて異なる選択をする必要がありますが、基本原則に従う必要があります:
2D を実行する必要がある場合アニメーションでは、CSS3 トランジションやアニメーションを使用しないでください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
