CSS3におけるトランジションとアニメーションの違いの紹介

** 長い間プロジェクトに取り組んできましたが、実際のプロジェクトで頻繁に使用される 2 つの CSS3 プロパティ とアニメーション を整理したいと思います。以下のように:

1: まずトランジションを紹介します:

a. ボタンにマウスを移動すると、そのボタンの背景色とフォントの色が変化するという状況によく遭遇します。このとき、通常は次のようにします:

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 
.btn:hover{background:green;color:white;}

b、背景とフォントの色が即座に変わることがわかりますが、この時点でトランジションが表示されますか?コードを参照してください:

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} 

.btn:hover{background:green;color:white;transition：0.4s;}

c、トランジションを追加した後、ボタンの背景色とフォントの色が最後まで時間の経過とともに段階的に変化することがわかります。

この漸進性はどのようにして起こるのでしょうか?はい、それは 0.4 秒です

0.4 秒について話すときは、遷移のさまざまな特性について説明する必要があります。ここではそのすべてを詳しく書きません。なぜなら、自分自身で情報を完全に確認できるからです。

(1: 上記の 0.4 秒は、トランジションの属性の 1 つの略称です。transition-duration

トランジション-デュレーションは、その名前が示すように、

アニメーション

の継続時間を表し、上記の 0.4 秒です。 0.4秒で完成 背景色と文字色のアニメーション (2: 0.4秒で連続アニメーションとなると、オブジェクトの動きの速さについて話さなければなりません。オブジェクトにはこのような動きがあることがわかっています。 :

(a Linear: 均一速度

—— Slow down

トランジション: 0.4s だけが書かれ​​ているのになぜ動き?

(3: こんな感じです。トランジションにはこの属性は、transition-timing-function と呼ばれます。デフォルトは、ease であり、その動きは徐々に遅くなります。

ボタンがホバリングされた後、すべての変更が行われることがわかります。ホバー スタイルの CSS でアニメーションをトランジションで記述します

この文で説明するのは少し複雑なので、直接コードに進んで説明しましょう:

1) 背景色を変更するだけの場合。

2) 上記のコードに背景が表示されています。これは、今回はアニメーションの背景色のみを指定しているためです。

これは、transition-property と呼ばれる、transition のプロパティの 1 つの略称です。実際のプロジェクトでは、このプロパティが必要になることがあります。アニメーションを遅延表示させ、すぐにアニメーションを生成しないようにします

このとき、トランジションの別の属性、transition が出てきます。コードを参照してください:

transition: 0.4s background ease-in

このボタンの背景のフォントアニメーションは 1 秒後に始まることがわかります

----》 遷移は簡単ですが、さまざまな制限があることがわかります

1: 遷移。ホバーなどのトリガーには

イベント

が必要なので、Web ページの読み込み時に自動的に発生することはありません

2: 遷移は 1 回限りであり、繰り返しトリガーされない限り繰り返すことはできません

3: 遷移は定義することしかできません。開始

状態

と終了状態ですが、中間状態はありません。つまり、状態は 2 つだけです。

4: 移行ルールは 1 つの属性への変更のみを定義でき、複数の属性を含めることはできません。

(わかりやすくするために、上記の 4 つの制限は阮一峰先生のブログからの紹介に基づいています)

これらの制限を突破するために、アニメーションが登場しました。

2: アニメーション:

a)、最初にアニメーションのさまざまな属性を詳しく説明するのはやめて、表示コードに直接行きましょう

transition: 0.4s 1s;

上記のコードはそのような効果を生成します。スクリーンショット:

b），当鼠标移入p的时候，p会发生一系列的样式改变（截图无法表现过程），在2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画，是因为什么呢？

 

 c），我准备作这样的解释，此时，你需要做一个animation动画只需要3点

 1. 需要一个承载动画的元素，如p

 2. 当前的元素写一个animation的css，其中定义你所需要这个动画产生的效果。（你暂时不需要知道如何编写这个动画内部的css）

 3. 编写一个动画进程，以@keyframes关键字来定义，而这个动画的进程有一个名字，如change，

　　----------》你可以把这个进程理解成一个函数，@keyframes对应的就是function，而change对应的就是函数名字-----------》最终等待被调用。

 

 好了，明白了以上三点，我们就可以来剖析animation的庐山真面目了。

 a）我们接着再来看这段代码：

animation: 2s change infinite;
　　　　

@keyframes change {
       0% { background: orange; }
       50% { background: pink;width: 200px; }
       100% { background: red;height: 300px; }
}

 

1. 我们先来看这个“所谓的函数change”

　　　　(1):这个change是animation其中的一个属性，叫做动画名字-----》 animation-name:change;

2. 我们再来看这个“百分比”

　　　  (1):这个百分比你只要理解它是这个这个动画在多少时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改变的的样式属性（可以定义多种）

　　　  (2):当然也可以这样写：

@keyframes change {
            from { background: orange; }
            50% { background: pink;width: 200px; }
            to { background: red;height: 300px; }
}

 

 3.看完了动画制作的过程，现在我们来看如何调用这个动画：见代码：

.c:hover{animation: 2s change infinite;}

 （1），机智的你肯定看到了2s，是的没错，就是它让动画2秒完成。和transition一样，它是animation的一个属性，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　叫做：animation-duration: 2s;

 （2），机智的你肯定看到了change,是的没错，就是如此调用这个“动画函数”的.只需要在当前元素animation的css样式里写入就可以了。

 

  （3），刚刚前面我们说了，这段代码会在鼠标移入p元素后2秒的时间完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画

　　　　 *：注意看到无限制三个字，

　　　　 *：无限制怎么来的呢？此时这段代码只剩下infinite了。

　　　　  *：不用想，他也是animation其中之一属性：叫做 animation-iteration-count: infinite;

　　　　  *：这个属性是用来定义这个动画应该播放多少次，infinite代表的无限制（无数次），当然你也可以在让它播放一个定值的数次，比如3次

animation-iteration-count: 3;

 在这里，你只需要在animation里的css里写入次数就可以了：

.c:hover{animation: 2s change 3;}

 

 

 4：这个动画虽然已经介绍完了，但是我们会发现动画在两秒钟后又会恢复原样（初始状态）：

此时我们想让动画两秒执行完毕之后保持在结束状态，这该怎么办了，此时animation的另一个属性就派上用场了

                                                                        -------------》animation-fill-mode:forwards;

在这里，你只需要在animation里的css里写入forwards就可以了：

.c:hover{animation: 2s change 3 forwards;}

2秒动画结束后就会是这样：

 

 

 

 5：同样的，animation也和transition一样具备延时动画的属性：

　　　　　　　　　　　　　　　　　　　　------------》animation-delay: 1s;

同样的animation简写写法如下,代表鼠标移入p内，1秒后动画开始

.c:hover{animation: 2s 1s change 3 forwards;}

 

6：同样的，animation也和transition一样具备动画以何种速度呈现的属性：默认是ease，它运动的形式是逐渐放慢的。

　　　　　　　　　　　　　　　　------------------》animation-timing-function: ease;

　　　　

　　　  （a  linear：匀速

　　　  （b  ease-in：加速

　　　  （c  ease-out：减速

　　  　（d  cubic-bezier函数：自定义速度模式（几乎不用）

 

****要改变运动形势只要添加相应的速度代表参数了，见代码：

.c:hover{animation: 2s 1s change 3 forwards linear;}

 

7:animation还有一个属性我就不打算细写了，--------》animation-direction，默认情况下是normal，

　　它是用来改变动画播放不仅只可以从结束状态跳回到起始状态这种形式。

 

8：上面说过，animation浏览器一加载便可以自动触发：

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; animation: 2s change forwards;}

** 此时你会发现，浏览器一运行这个p就开始动画了。至于什么时候触发，那就要看项目具体需求了。

 

结语：自此，css3中的两大动画transition和animation就介绍完了。如有错误，欢迎指正。

 

以上がCSS3におけるトランジションとアニメーションの違いの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。