css3での変形とアニメーション(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 アニメーションのいくつかのプロパティ: 変換、トランジション、アニメーション。

transform が導入されました。次にトランジションを紹介します。

1. 例

まずは例を通してトランジションのアニメーション効果を理解しましょう。

その上にマウスを置くと、div幅が100pxから200pxに増加します。

すごい

このエフェクトは実際にはアニメーションですが、変化が非常に早く、滑らかではありません。

マウスを置いてから 5 秒以内に div 幅を 200px にスムーズに移行したい場合。コードを 1 行追加するだけです。ここで使用されるのは、属性値のスムーズな遷移を実現し、視覚的なアニメーション効果を生成するために使用される、transition 属性です。

上記で使用されているtransitionは略語であり、transition-property、transition-duration、transition-timing-function、transition-delayの4つの属性が含まれており、以下で1つずつ紹介します。

2. トランジション

CSS3 は新しいトランジション属性を追加します。これにより、イベントによってトリガーされる要素のスタイルが変更されるときの効果をより繊細かつスムーズにすることができます。

Transition は、CSS 属性値を一定期間内に 1 つの値から別の値にスムーズに遷移させる方法を記述するために使用されます。このトランジション効果は、

マウスクリック

、

フォーカスの取得

、クリックされる、または要素への何らかの変更でトリガーできます。構文:

<style type="text/css">    div{        width: 100px;        height: 100px;        background-color: red;    }    div:hover{        width: 200px;    }</style><div></div>

ログイン後にコピー

transition には 4 つの属性値があります:

transition-property: トランジションを実行するプロパティ。

transition-duration: 移行が完了するまでに必要な時間を指定します。

transition-timing-function、継続期間中に、遷移変換の速度が変化することを簡単に理解すると、遷移関数を指定します。

transition-lay: 遷移遅延時間。

1.transition-property

transition-property は、トランジションアニメーション効果を使用するプロパティを指定するために使用されます。

構文:

div:hover{    width: 200px;<strong> transition:width 5s ease-in;</strong>}

ログイン後にコピー

none: すべての属性にトランジション効果は適用されません。

all

: デフォルト値。値が all の場合、要素のいずれかの属性値が変化したときにトランジション効果が実行されます。

ident: 要素の属性名。 ident を通じて特定の属性を指定します。指定された複数の属性の 1 つにトランジション効果を適用できない場合でも、他の属性が有効になります。トランジションアトリビュートには、

中間値

(アニメーション化する必要があるアトリビュート) がある場合にのみ、トランジションエフェクトを持つことができます。トランジション効果を実現できるすべての CSS 属性値と値のタイプは、ここをクリックして表示されます。

注意

注

: ページの適応幅など、すべての属性変更が遷移アニメーション効果をトリガーするわけではありません。ブラウザが幅を変更しても、遷移効果はトリガーされません。ただし、上の表に示されている属性タイプを変更すると、トランジションアクション効果がトリガーされます。

例: 高さと行の高さのアニメーション効果を同時に設定するなど、複数の属性のアニメーション効果を同時に設定できます。これにより、div が高くなり、テキストが垂直方向の中央に配置されたままになります。

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

ログイン後にコピー

2.transition-duration

transition-duration は、古い属性から新しい属性に遷移するのに必要な時間、つまり継続時間を設定するために使用されます。

3.transition-timing-function

構文:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

ログイン後にコピー

transition-timing-function 属性は、トランジションの「イージング関数」を指します。この機能によって加速カーブが確立されるため、移行プロセス全体を通じて変化速度が変化し続けることができます。主に以下の機能が含まれます。

ease

: デフォルト値。要素スタイルは初期状態から終了状態に高速から低速に移行し、その後徐々に遅くなります。

linear: 線形遷移、つまり遷移プロセスが一定速度であることを意味します。イーズイン: 速度がどんどん速くなり、通常「徐々に効果」と呼ばれる加速状態を示します。

イーズアウト: 速度がどんどん遅くなり、通常「フェード効果」と呼ばれる減速状態を示します。

イーズインアウト速度は最初に加速し、その後減速します。これを「フェーディング効果」と呼びます。

例: マウスが疑問符の上を通過すると、ヘルプ情報がフェードインまたはフェードアウトします。

Property Name     Typebackground-color     as colorbackground-position     as repeatable list of simple list of length, percentage, or calcborder-bottom-color     as colorborder-bottom-width     as lengthborder-left-color     as colorborder-left-width     as lengthborder-right-color     as colorborder-right-width     as lengthborder-spacing     as simple list of lengthborder-top-color     as colorborder-top-width     as lengthbottom     as length, percentage, or calcclip     as rectanglecolor     as colorfont-size     as lengthfont-weight     as font weightheight     as length, percentage, or calcleft     as length, percentage, or calcletter-spacing     as lengthline-height     as either number or lengthmargin-bottom     as lengthmargin-left     as lengthmargin-right     as lengthmargin-top     as lengthmax-height     as length, percentage, or calcmax-width     as length, percentage, or calcmin-height     as length, percentage, or calcmin-width     as length, percentage, or calcopacity     as numberoutline-color     as coloroutline-width     as lengthpadding-bottom     as lengthpadding-left     as lengthpadding-right     as lengthpadding-top     as lengthright     as length, percentage, or calctext-indent     as length, percentage, or calctext-shadow     as shadow listtop     as length, percentage, or calcvertical-align     as lengthvisibility     as visibilitywidth     as length, percentage, or calcword-spacing     as lengthz-index     as integer

ログイン後にコピー

4.transition-delay

transition-delay は、属性値を変更してからアニメーションの実行を開始するまでの時間を設定します。

5. 属性の省略形

複数の CSS 属性のトランジション効果を変更する場合、複数のトランジションステートメントをカンマで区切ると、各属性に独自のトランジション時間と効果が与えられます。

注

: 1 回目は継続時間、2 回目は遅延です。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>变形与动画</title>    <style type="text/css">div {    width: 300px;    height: 200px;    line-height: 200px;    text-align: center;    background-color: orange;    margin: 20px auto;    -webkit-transition-property: height line-height;    transition-property: height line-height;    -webkit-transition-duration: 1s;    transition-duration: 1s;    -webkit-transition-timing-function: ease-out;    transition-timing-function: ease-out;    -webkit-transition-delay: .2s;    transition-delay: .2s;}div:hover {    height: 100px;    line-height: 100px;}</style></head><body>    <div>文字垂直居中</div></body></html>

ログイン後にコピー

3. ベジェ曲線と遷移 遷移の数学的モデルは、以下に紹介するベジェ曲線です。

曲線は実際には 2 点間の補間の効果であり、線形補間よりも少し複雑な補間アルゴリズムです。

贝塞尔曲线：起始点，终止点（也称锚点），控制点。通过调整控制点，贝塞尔曲线的形状发生变化。

k阶贝塞尔插值算法需要k+1个控制点。

一阶贝塞尔曲线（线段）：意思就是从P0到P1的连续点，用来描述一段线段。一次贝塞尔插值就是线性插值。

二阶贝塞尔曲线（抛物线）：P0-P1是曲线在P0处的切线。

三阶贝塞尔曲线：

transition用到的就是三阶贝塞尔插值算法,如下图。

时间在0,1区间，待变换属性也认为是0,1区间。P0和P3的坐标一直是（0,0）和（1,1）。transition-timing-function属性用来确定P1和P2的坐标。

ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]

linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]

ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]

ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]

ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]

step-start steps(1,start)

step-end steps(1,end)

cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

四、其他相关资料

canvas画贝塞尔曲线：查看来源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>bezier demo</title></head><body><div style="width:800px;height:600px;background-color:#fac0c0;"><canvas id="cvs" width="800" height="600">骚瑞，您的浏览器不支持canvas</canvas></div><script type="text/javascript">var cvs=document.getElementById("cvs"),context=cvs.getContext("2d"),points=[];function getXY(node){var x=0,y=0;if (node.offsetParent) {while (node.offsetParent) {x += node.offsetLeft;y += node.offsetTop;node = node.offsetParent;}}else {node.x && (x += node.x);node.y && (y += node.y);}return [x,y];}function drawPoint(x,y,c,b) {!b && (b=2);context.fillStyle=c || "red";context.fillRect(x,y,b,b);}function bezier(points,t){var i,n=points.length-1,x=0,y=0;function fn(p,n,i,t){return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);}for(i=0;i<n+1;i++){x+=fn(points[i][0],n,i,t);y+=fn(points[i][1],n,i,t);}return [x,y];}function factorial(n){if(isNaN(n) || n<=0 || Math.floor(n)!==n){return 1;}var s=1;while(n){s*=n--;}return s;}function arrangement(n,r){return factorial(n)/(factorial(r)*factorial(n-r));}cvs.addEventListener("click",function(event){var i,point=getXY(this),x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft),y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop);points.push([x,y]);context.clearRect(0,0,screen.width,screen.height);context.beginPath();//pointsfor(i=0;i<points.length;i++){drawPoint(points[i][0],points[i][1],"blue",4);}//bezierfor (i = 0; i < 1; i += 0.001) {drawPoint.apply(this, bezier(points,i));}//lineif(points.length==1){context.moveTo(points[0][0],points[0][1]);}else if (points.length>1){for(i=0;i<points.length;i++){context.lineTo(points[i][0],points[i][1]);}context.lineWidth=0.2;context.stroke();context.closePath();}},true);</script></body></html>

ログイン後にコピー

开发中可使用下面工具：

缓动函数速查表

图形工具

参考：

cubic-bezier curve.

transition-timing-function

timing-function

下面这篇文章没有原理，但可以让我们从设计师的角度去了解贝塞尔曲线。

干货！设计师必须掌握的贝塞尔曲线的秘密

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。