ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3での変形とアニメーションを詳しく解説

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

高洛峰
高洛峰オリジナル
2017-03-16 13:23:001418ブラウズ

最近、モバイル ページの作成を学んでいて、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。