CSS3での変形とアニメーションを詳しく解説

最近、モバイル ページの作成を学んでいて、CSS3 の新しい変形や アニメーション など、CSS3 の新しい コンテンツをたくさん使用する WeChat ページの小さなデモを作成しました。実際、この CSS3 アニメーション効果は JS でも実現できますが、CSS3 はハードウェア アクセラレーションを有効にすることができ、パフォーマンスが向上します。

（ブラウザのプレフィックスは以下に書かれていません。必要に応じて自分で追加してください~~)

CSS3での一般的なアニメーション効果の実現は、実際には主にトランジションとアニメーションに依存しています。 通常、これら 2 つは CSS3 の新しい

属性 transform と組み合わせて使用​​されます

それでは、これら 3 つは実際には何に使用されるのでしょうか?私自身の理解に基づいて簡単な結論を導き出します。

transform: 要素を変換します。

transition: 要素の属性が変化するときに遷移アニメーション効果を与えます。

animation: 複雑なアニメーションを実行します。

以下で詳しくお話しましょう。

最初に説明するのは、transform の構文です。

transform:none | transform-functions ;

none はそのデフォルト値であり、次のtransform-functions は変換

function を参照します。

変換関数は 2D と 3D の 2 つのタイプに分けられます。 ; // 関連する構文 http://www.w3school.com.cn/cssref/pr_transform.

asp

で確認できます。2D のものには次のものがあります: (変換は要素の中心に基づいています。は、X 軸と Y 軸の 50% )

Translate() //translateX() と translationY() を含みます 関数: XOY 座標に従って要素を移動します (andscaleY(); 関数: 要素を拡大または縮小します。

rotate() // 関数: 要素を回転します。

skew() // skewX() と skewY() を含みます 関数: 要素を傾けます。

さらに、3D にはさらに多くの Z 軸があります。関連する構文は

W3C

で参照できます。ここでは、Zhang Xinxu が書いた記事をお勧めします (http://www.zhangxinxu.com/w

ordpress/2012/ 09)。 /css3-3d-transform-perspective-animate-transition/)、変形の説明が分かりやすいです。記事で説明されている構文は、より良い結果を得るために次のシミュレーターで使用できます~ (http://fangyexu.com/tool-CSS3Inspector.html) いくつかのポイントを要約しましょう: 1. 3D 変形を実行します。変形した要素は、最初に 2 つのラベル層 (1 つはステージ、もう 1 つはコンテナ) でラップする必要があります。

舞台
    容器
        元素
        元素
        ...

//私の個人的な理解では、ステージ上の要素を全体として扱う場合、追加できるのはラベルのレイヤーのみ、つまりステージはコンテナとみなされます

舞台(容器)
    元素
    元素
    ...

2.ステージのCSSについて, 設定パースペクティブ（視距離）とは、人物と舞台との想定される距離を指します。コンテナの CSS で transform-style:preserve-3d を設定して 3D

view

を有効にし、コンテナの子要素が 3D 空間で表示されるようにします。 //ステージをコンテナとして使用する場合、パースペクティブとtransform-styleを一緒に記述します。

では、変形の基点は要素の中心だけでよいのでしょうか？いいえ。 transform-origin 属性は、変換の基点を変更できます。

---

変換元のキーワードは一般に

top

/

bottom / left / right / center / top left / top right です。たとえば、個々のキーワードの一部は略語です。 top = 上部 center = 中央上部 次に、トランジションアニメーションのトランジションがあります。

---

トリガー条件はJSの

:hover

/

:focus / :active / :checked / event

语法： transition: 指定过渡的CSS属性 、 过渡所需时间 、 过渡的函数（动画的速度控制） 、 开始的延迟时间

指定过渡的CSS属性：all / 指定样式 / none （若省略不写，则为 all ，none一般用于清空动画）

过渡所需时间：单位s / ms （默认为0）

过渡的函数： ease（由快到慢 默认值） / linear（匀速） / ease-in（加速） / ease-out（减速） / ease-in-out（先加速后减速）/ cubic-bezier（三次贝塞尔曲线）

延迟时间：单位s / ms （默认为0）

（写transition的时候，先写 动画时间 ， 再写延迟时间）

---

举个例子吧，博雅今年秋招的笔试题：

　　用 CSS3 实现一个半径25px的圆 进行速度由快到慢的300px滚动。

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);}

贼简单吧~ 这里有几个细节，第一个就是 transition 是放在元素上，而不是 active 上，如果放在active上，就没有回去的动作了，大家可以试一下。

　　　　　　　　　　　　　　　　第二个就是，transform多个属性的时候，中间用空格来隔开，如果用逗号的话就没反应了。

但如果我在 :active 上加上 transition，

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}
p:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}

这样按住的时候，就会执行 active 里面的transition，也就是去的时候用时 2s ，加速运动；而回来的时候执行 p 里的transition ，用时1s 减速运动。

---

最后就到 animation 了~ animation也是做动画的，不过功能比 transition 更加强大，因为animation可以控制动画的每一步，而transition只能控制开头和结尾。

语法 animation: 关键帧动画名字 、 动画时间 、 动画播放方式（函数） 、 延迟时间 、 循环次数 、 播放方向 、 播放状态 、 动画时间外的属性 ；

关键帧动画名字：就是你要执行的动画的名字，这里要先知道关键帧的语法

@keyframes name{
     0%{
       ...       
    }   
    50%{
       ...
    }
    100%{
       ...
    }  
}

这里的关键帧的名字就是name ，然后百分比的就是动画的进度，可以根据需要设置不同的百分比，再设置不同的动画。

动画时间：和transition一样~

动画播放方式（函数）：和transition的过渡的函数一样~

延迟时间：和transition一样~

循环次数：动画播放的次数，默认为1，通常为整数，如果为 infinite，则无限次地播放；

播放方向：默认为normal，就是正常地向前播放，还有一个值是 alternate ，就是先正向播放，再反向播放，不断地交替；

播放状态：running(默认) 、 paused // 像播音乐一样可以通过动作来暂停动画;

动画时间外的属性: none(默认) 、 forwards 、 backwards 、both；

　　举个例子吧：

@keyframes color{
    0%{ background:yellow}
    100%{ background:blue}
}
p{ background:black}

　　none：　　　　动画开始前：黑  ； 动画结束后：黑

　　forwards：　　动画开始前：黑 ； 动画结束后：蓝

　　backwards：　动画开始之前：黄 ； 动画结束后：黑

　　both：　　　　动画开始前：黄 ； 动画结束后：蓝

就是这么简单~

---

最后，说一下这三个属性在JS中的写法：

transform：

obj.style.transform = "translateX(100px) scale(2)";
obj.style.webkitTransform = "translateX(100px) scale(2)";//带浏览器前缀

transition：

obj.style.transition = "1s";
obj.style.webKitTransition = "1s";//带浏览器前缀

animation：

obj.style.animation = "name 1s ";//1、关键帧先在css写好；2、兼容写法在关键帧里面写；

以上がCSS3での変形とアニメーションを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。