ホームページ > 記事 > ウェブフロントエンド > 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.で確認できます。2D のものには次のものがあります: (変換は要素の中心に基づいています。は、X 軸と Y 軸の 50% ) Translate() //translateX() と translationY() を含みます 関数: XOY 座標に従って要素を移動します (andscaleY(); 関数: 要素を拡大または縮小します。 rotate() // 関数: 要素を回転します。 skew() // skewX() と skewY() を含みます 関数: 要素を傾けます。 さらに、3D にはさらに多くの Z 軸があります。関連する構文はW3C
で参照できます。ここでは、Zhang Xinxu が書いた記事をお勧めします (http://www.zhangxinxu.com/wordpress/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 = 中央上部 次に、トランジションアニメーションのトランジションがあります。
: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 サイトの他の関連記事を参照してください。