css3のアニメーション機能は、
1.transition(遷移属性)
2.transform(2D/3D変換属性)
transition过渡效果
アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。
animation-timing-function はアニメーションのスピードカーブを指定します。 |
animation-delay |
アニメーションが開始するまでの遅延を指定します。 | animation-iteration-count |
アニメーションを再生する回数を指定します。 | animation-direction |
アニメーションを順番に逆再生するかどうかを指定します。 | 注: Internet Explorer 9 以前のバージョンでは、アニメーション プロパティがサポートされていません。 |
値 |
|
説明 |
|
必須。アニメーションの名前を定義します。 |
キーフレームセレクター
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
例如:
animation:mymove 5s infinite; @keyframes mymove{ from{ top:0px; } to{ top:200px; } }
还可以这么写:
@keyframes mymove{ 0%{ top:0px; } 25%{ top:200px; } 50%{ top:100px; } 75%{ top:200px; } 100%{ top:0px; } }
案例:
css3的animation效果
注释:本例在 Internet Explorer 中无效。
3、设置3D场景(即transform)
-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。
-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置,即屏幕的正中央。)
使用transform属性调整元素:-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)
(1)、translate(移动距离)
translateX(x px)
translateY(y px)
translateZ(z px)
(2)、rotate(旋转角度)
rotateX(x deg)
rotateY(y deg)
rotateZ(z deg)
transform:rotate(45deg)
rotateX:向屏幕上边沿向内旋转为正方向。
rotateY:向屏幕竖直向下为正方向。
rotateZ:向屏幕外为正方向。
一个p块,右边沿向屏幕内旋转45deg,即应设置为:Transform:rotateY(45deg)。
实例:
transform3D转换效果
transform3D转换效果
translate(移动距离)
rotate(旋转角度)
使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。
这个旋转中心是可以改变的:
X轴:left、center、right.
Y轴:top、center、bottom.
Z轴:length px(一个长度值)。
以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。
更多CSS3アニメーション効果の概要分析相关文章请关注PHP中文网!
相关文章:
有効な値: 0-100% |
から(0%と同じ) |
CSスタイル |
|
必須。 1 つ以上の有効な CSS スタイル プロパティ。 |