CSS3 プロパティトランジション、変換、およびアニメーション_html/css

推定読了時間: 29 分

1. 序文と目次索引

CSS3 アニメーションに関連するいくつかのプロパティは次のとおりです。それぞれトランジション、トランスフォーム、アニメーションとして理解されます。

トランジションは、川を渡ってフェリーに乗るのと同じように、点 a から点 b への遷移を指します。これは通常、通常の CSS プロパティを対象としています。変換では、回転、スケーリング、オフセットなどのいくつかの固定属性だけが、遠隔相対遷移とは独立して使用されますが、その効果は非常にドライで機械的な回転の動きになります。トランジション属性や回転などと組み合わせると非常にスムーズになります。アニメーションは最初は Safari ブラウザに定着しており、トランジションとトランスフォームとはまったく関係がないように見えますが、デュエルに関してはトランジションよりもアニメーションの方が強力です。

ディレクトリインデックス

1. トランジションについて話しましょう

2. トランスフォームについて話しましょう

3. アニメーションについて話しましょう

4. より実践的かつ包括的な効果の表示

5. ブラウザのサポート

6. 参考記事と詳細な読み物

7. まとめ

2.トランジションといえば

CSS3 トランジションプロパティは、昨年の記事「CSS3 トランジションで超クールなピクチャーウォールアニメーション効果を実現」ですでに紹介されていました。その機能は次のとおりです: は CSS の値をスムーズに変更します。クリックイベント、フォーカスイベント、マウスホバーのいずれであっても、値が変化する限り、スムーズかつアニメーション化されます。そのため、サイト全体に共通のクラスさえあれば、簡単かつ段階的にアニメーション効果を高めることができ、非常に実用的です。

トランジションには次の特定のプロパティがあります:

transition-property:* //transition-property:backgrond など、トランジションの性質を指定します。このトランジションに参加します

transition-duration:*//このトランジションの継続時間を指定します

transition-delivery:* //トランジション時間を遅らせます

transition-timing- function:*// 遷移タイプには、ease-in |ease-in-out | cubic-bezier

を指定します。簡単な例:

.trans {    -webkit-transition-property: background-color;    -webkit-transition-duration: 0.3s;    -webkit-transition-timing-function: ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

ログイン後にコピー

結果は、Safari または Chrome ブラウザーで次のように表示されます。

Webkit コアを備えたブラウザーを使用している場合、または Webkit コアを備えたブラウザーをお持ちの場合は、ここをクリックしてください: Webkit カーネルブラウザ

での背景色の遷移のデモは、CSS2 の背景属性と同じです。通常、上記のように遷移属性を 1 つずつ記述するのではなく、それらをマージします。

上記の例でも、次の CSS コードに示すように、transition 属性をマージして複数のブラウザに拡張します。

.trans {    ...    -webkit-transition: background-color 0.3s ease;    -moz-transition: background-color 0.3s ease;    -o-transition: background-color 0.3s ease;    transition: background-color 0.3s ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

ログイン後にコピー

次の HTML コード:

<a href="/" class="trans">经过我~~</a>

ログイン後にコピー

結果は次のとおりです (Opera 10.6 ブラウザーから取得):

トランジションのtransition-timing-function属性は人々に恨みを感じさせますが、その束縛は非常に簡単です関連する値 (linear |ease-in |ease-out |ease-in-out | cubic-bezier) ですが、これは人々にとって理解して覚えるのが容易ではありません。特に、3 次ベジェ曲線とは、複雑な数学との関係が高校数学の悪夢を呼び起こさずにはいられません。

実際のところ、それを合理化しようとするのは問題ありません。まず、cubic-bezier は基本的には不要です。したがって、これを使用することはほとんどありません。 Linear は覚えやすく、直線的です。 easy-in | easy-in-out については、端的に言えば、最初にゆっくりと移動するか、最後にゆっくりと移動することを意味します。では、インとアウトのどちらを先にゆっくり動かすべきでしょうか？ああ、記憶を関連付けることができるので、思い出すのは簡単です。イーズインの「イン」は、明らかに最初はゆっくりで、狙いが整った後はすぐにスプリントできます。つまり、イーズインは最初にゆっくりと、その後に素早くアウトすることを意味します。 out はその逆で、出てくるときは、最初は速く、次にゆっくりと出なければなりません。なぜなら、出てくるときは、混乱しないように、ホールの入り口付近で速度を落とさなければなりません。出てくるときにリズムを上げます。つまり、イーズアウトは、最初は速く、次にゆっくりすることを意味します。理解するのは簡単です。イーズインアウトは、最初はゆっくり、次に速くすることを意味します。それからゆっくり。

上記の邪悪な言葉の意味を理解できない人もいるかもしれませんが、それは問題ではありません。次のスクリーンショットは、さまざまなモーションカーブから取得したものです。どちらが先に見えますか? どちらが先に到着しますか? どちらが先に到着しますか? (注: 最終的にはすべて同時に到着します):

上の静的なスクリーンショットでは十分に具体的でない場合は、ここをクリックしてください: さまざまなイージング効果のデモ (Opera/Chrome/Safari)

ブロックの動きのパターンを観察し、さまざまなイージング名の効果を知ることができます。

上記は移行についての簡単な説明です。より詳細で信頼できる情報を参照するには、公式ページにアクセスしてください。

3. 変形といえば

変形とは、Photoshop を使ったことがある人なら知っているはずです。変換とは、ストレッチ、圧縮、回転、オフセットを指します。以下のサンプルコードを参照してください:

.trans_skew { transform: skew(35deg); }.trans_scale { transform:scale(1, 0.5); }.trans_rotate { transform:rotate(45deg); }.trans_translate { transform:translate(10px, 20px); }

ログイン後にコピー

結果は次の効果と同様になります:

您可以狠狠地点击这里： transform些属性效果demo

transform属性要是加上transition的过渡特性，那可就是如虎添翼，樱木花道配上流川枫啊，可以产生不少美妙的火花，例如下面这个例子，关键代码如下：

.trans_effect {    -webkit-transition:all 2s ease-in-out;    -moz-transition:all 2s ease-in-out;    -o-transition:all 2s ease-in-out;    -ms-transition:all 2s ease-in-out;        transition:all 2s ease-in-out;}.trans_effect:hover {    -webkit-transform:rotate(720deg) scale(2,2);    -moz-transform:rotate(720deg) scale(2,2);    -o-transform:rotate(720deg) scale(2,2);    -ms-transform:rotate(720deg) scale(2,2);    transform:rotate(720deg) scale(2,2);        }

ログイン後にコピー

结果在Chrome预计Safari浏览器下就有了祖玛里面青蛙挂掉时的缩放旋转效果了：

鼠标经过时：

如果你手上有webkit核心的浏览器，可以狠狠地点击这里：酷酷的缩放旋转动画demo

transform还支持3D变换，怎一酷字了得。由于某些不可告人的原因，这里就不展示了。故，transform部分到此结束。

四、话说animations这物

截止2010年11月份，animations这物似乎还是只在webkit核心的浏览器上起作用，所以本段落的一些demo效果，需在webkit核心浏览器下查看，不在重复赘述。

animations的介绍以实例驱动。先看简单的缩放扩展动画实例：

您可以狠狠地点击这里： animations水平弹性缩放变色动画

效果大致如下，默认是个很规矩很安静的矩形框：

鼠标移上去后显示慢慢的宽度增加，然后突然快速的宽度增加，同时背景色加深，下为动画过程中的截图：

关键的CSS代码如下：

@-webkit-keyframes resize {    0% {        padding: 0;    }    50% {        padding: 0 20px;        background-color:rgba(190, 206, 235, 0.2);            }    100% {        padding: 0 100px;        background-color:rgba(190, 206, 235, 0.9);    }}.anim_box:hover {    -webkit-animation-name: resize;    -webkit-animation-duration: 1.5s;    -webkit-animation-iteration-count: 4;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;}

ログイン後にコピー

此例子中，鼠标悬停时动画只执行4次。

animations不仅适用于CSS2中的属性，CSS3也是支持的，例如box-shadow盒阴影效果，所以，我们可以实现外发光效果的。使用过web qq的人应该有印象，当鼠标移到聊天对象脑袋上的时候会有蓝色外发光的动画，但是那是gif动画图片实现的（现在自动跳转到web qq 2.0已看不到效果）。gif动画实现的效果类似于下面（很兼容）：

摸左边张含韵

但是gif的重用性有限而且制作破费功夫，如果简单几行CSS代码就可以实现高性能高扩展的效果岂不更加，现在animations就可以搞定这一些。

您可以狠狠地点击这里： animations下的外发光动画demo

发光效果如下：

主要的CSS代码如下：

@-webkit-keyframes glow {    0% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);        border-color: rgba(160, 179, 214, 0.5);             }    100% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);        border-color: rgba(160, 179, 214, 1.0);     }}.anim_image {    padding:3px;    border:1px solid #beceeb;    background-color:white;    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);}.anim_image:hover {    background-color:#f0f3f9;    -webkit-animation-name: glow;    -webkit-animation-duration: 1s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;    }

ログイン後にコピー

animation展示结束，的说~~