css メモ -- css3 での変換遷移のアニメーション_html/css_WEB-ITnose の区別

出典: http://blog.csdn.net/dyllove98/article/details/8957232

CSS3 には、transform、transition、animation というアニメーションに関連する 3 つのプロパティがあります。以下で 1 つずつ説明しましょう:

transform

文字通り、transform の意味は変化すること、変形することです。ここではそれを変形として理解することができます。どのように変更できますか?

none は変換がないことを意味します。

回転回転transform:rotate(20deg) 回転角度は負の数にすることができます。回転の基点を定義するには、最初に Transform-origin を定義する必要があります。これは、左上中央右下または座標値 (50px 70px) です。

skew 歪み変換:skew(30deg,30deg) skew (x 軸に対して傾斜、y 軸に対して傾斜)

scale スケール変換:scale(2,3) 水平方向に 2 倍、垂直方向に 3 倍拡大します。 。たとえば、スケールアップしてパラメータを書き込むだけです。

変換移動 変換:translate(50px, 50px);

行列行列変換 基本構文 変換: 行列 (a, c, b, d, tx, ty); ここで、a、c、b、d は 2 次元です。行列 :

   ┌     ┐    │ a b │   │ c d │   └     ┘

a:X轴缩放比例 b:Y轴倾斜 c:Y轴缩放比例 d:X轴倾斜

 tx, ty就是就是基于X和Y 坐标重新定位元素。其实就是translate （tx,ty）<br /><br /><br /><br /><strong>Transition</strong>  <br /><br />W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition主要包含四个属性值：transition-property： 执行变换的属性；

transition- duration：      变换延续的时间：

transition-timing-function：    在延续时间段，变换的速率变化；

transition- delay ：变换延迟时间

構文:

transition-property: none | all |

transition-property は、いつ実行されますか要素のプロパティの変更には、主に次の値があります: none (属性は変更されません)、値が none の場合は、これがデフォルト値になります。 all に指定すると、要素の属性値が変更されたときにトランジション効果が実行されます。要素の特定の属性値を指定できます。対応するタイプは次のとおりです。

1. カラー: 赤、緑、青、および透明度のコンポーネントを通じて変換されます (各値は個別に処理されます)。たとえば、背景色、境界線色、色、輪郭色、およびその他の CSS プロパティ ;

2. 長さ: 単語間隔、幅、垂直方向の配置、上、右、下、左、パディング、アウトラインの幅、マージン、最小幅、最小高さなどの実数。 max-width 、max-height、line-height、height、border-width、border-spacing、background-position およびその他の属性

3. 実数 (word-spacing、width、vertical-align など)。 、top、right、bottom、left、min-width、min-height、max-width、max-height、line-height、height、background-position およびその他の属性

4、整数の離散ステップ (整数)、実際のデジタル空間で、floor() を使用して、outline-offset、z-index、その他の属性に変換するときに発生します。次のような数値 (浮動小数点) 値。ズーム、不透明度、フォントの太さなどの属性

6. 変換リスト: 詳細については、「CSS3 変換」を参照してください。

7. 長方形: x、y、幅、高さによって変換されます (数値に変換されます)。次のようになります。

8. 可視性: 0 から 1 の数値範囲内で、0 は「非表示」を意味します。 , 1 完全な「表示」を示します。次のようになります。

9. シャドウ: 色、x、y、およびぼかし (ぼかし) 属性に作用します。次のとおりです。

10.停止するたびに色が変わります。アニメーションを実行するには、同じタイプ (ラジアルまたはリニア) と同じストップ値が必要です。たとえば、背景画像、ペイント サーバー (SVG): グラデーションからグラデーション、およびカラーから色、その後の作業は上記と同様です。

12. 上のスペース区切りのリスト: リストに同じ項目値がある場合、リスト内の各項目は上記のルールに従って変更されます。それ以外の場合は、何も表示されません。変更;

13. 省略形プロパティ: 略語のすべての部分をアニメーション化できる場合、すべての個々のプロパティの変更と同様に変更されます。

トランジション効果をサポートする属性:

プロパティ名 タイプ border-bottom-color 色としてborder-bottom-width長さとしてborder-left-color色としてborder-left-width長さとしてボーダー右の色 as colorborder-right-widthas lengthborder-spacingas lengthの単純なリストborder-top-coloras color ボーダートップ-幅長さとして底部長さ、割合、または計算としてクリップ長方形として色色としてフォントサイズ長さとしてfont-weightフォントの太さとして高さ長さ、パーセンテージ、または計算値としてleft長さ、パーセンテージ、または計算値として文字間隔長さとして line-heightmargin-bottommargin-left余白右 margin-topmax-heightmax-width min-height長さとして、パーセント、または計算最小幅長さ、パーセント、または計算として数値として色として長さとして長さとしてパディング左長さとしてパディング右長さとしてパディングトップ長さとして right長さ、パーセンテージ、または計算としてtext-indent長さ、パーセンテージ、または計算としてtext-shadowシャドウリストとしてtop長さ、割合、または calcvertical-align長さとして可視性可視性として幅長さ、パーセント、または計算として単語の間隔長さとしてz-index整数として

background-color	as color
background-position	length、percentage、calc の単純なリストの反復可能なリスト
数値または長さとして
長さとして
長さとして
長さとして
長さとして
長さ、パーセンテージ、または計算値として
長さ、パーセンテージ、または計算値として
	不透明度
	輪郭の色
	輪郭幅
	パディング下
transition-duration transition-duration是用来指定元素 转换过程的持续时间，取值：46dd80ba616c57a652514755c74c4211为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。   transition-timing-function   取值： transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值： 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)； 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)； 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)； 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)； 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)； 6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。 其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default。 transition-delay   transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取 值：46dd80ba616c57a652514755c74c4211为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包 括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。 有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的 声明串 在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为 transition-duration第二个为transition-delay。如：    a {transition: background 0.5s ease-in,color 0.3s ease-out} 如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如： a{transition: all 0.5s ease-in} }    animation   顾名思义为动画的意思。Animation应用在页面DOM上 使其产生动画的效果。在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。 一个官网的示例： @-webkit-keyframes 'wobble' { 0% { margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } } 　　 这里我们定义了一个叫“wobble”的动画，名字任意取。分几个阶段0% 40% 60% 100% 来过渡。 keyframes定义好了以后，就可以去调用定义好的动画“wobble”了。 下面我们来看看怎么给一个元素调用animation属性 .demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 10s;/*动画持续时间*/ -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 2s;/*动画延迟时间*/ -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ }　　 <strong>animation-name:</strong> animation-name:是用来定义一个动画的名称，为Keyframes中的名称，否则不会有动画效果。none为默认值，当值为none时，将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样，我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。 CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的 animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果。