CSS动画讲解

超、凢脫俗 2021-09-18 09:02 202阅读 0赞

CSS3 2D 转换  
Internet Explorer 10, Firefox, 和 Opera支持transform 属性.  
Chrome 和 Safari 要求前缀 -webkit- 版本.  
注意： Internet Explorer 9 要求前缀 -ms- 版本.  
语法：

div  
\{  
transform: rotate(30deg);  
\-ms-transform: rotate(30deg); /\* IE 9 \*/  
\-webkit-transform: rotate(30deg); /\* Safari and Chrome \*/  
\}  
  
属性    内容  
translate()    根据左（X轴）和顶部（Y轴）位置给定的参数，从当前位置移动。  
rotate()    在一个给定度数顺时针旋转的元素，负值是允许的，这样的元素逆时针旋转。（如rotate值（30deg）元素顺时针旋转30度。）  
scale()    该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如（scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。）  
skew()    语法：transfoorm:skew(<angle> \[,<angle>\]);包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。  
matrix()    该方法有6个参数，包含 旋转，缩放，移动（平移）和倾斜功能。  
CSS3 3D 转换  
转换属性  
属性    描述  
transform    元素应用2D或3D转换  
transform-origin    允许你改变被转换元素的位置  
transform-style    规定被嵌套元素如何在 3D 空间中显示  
perspective    规定 3D 元素的透视效果  
perspective-origin    规定 3D 元素的底部位置  
backface-visiblity    定义元素在不面对屏幕时是否可见  
3D 转换方法  
函数    描述  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。  
translate3d(x,y,z)    定义 3D 转化。  
translateX(x)    定义 3D 转化，仅使用用于 X 轴的值。  
translateY(y)    定义 3D 转化，仅使用用于 Y 轴的值。  
translateZ(z)    定义 3D 转化，仅使用用于 Z 轴的值。  
scale3d(x,y,z)    定义 3D 缩放转换。  
scaleX(x)    定义 3D 缩放转换，通过给定一个 X 轴的值。  
scaleY(y)    定义 3D 缩放转换，通过给定一个 Y 轴的值。  
scaleZ(z)    定义 3D 缩放转换，通过给定一个 Z 轴的值。  
rotate3d(x,y,z,angle)    定义 3D 旋转。  
rotateX(angle)    定义沿 X 轴的 3D 旋转。  
rotateY(angle)    定义沿 Y 轴的 3D 旋转。  
rotateZ(angle)    定义沿 Z 轴的 3D 旋转。  
perspective(n)    定义 3D 转换元素的透视视图。  
CSS3 过渡  
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性  
指定效果的持续时间。  
注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。  
例：  
div  
\{  
    transition: width 2s;  
    -webkit-transition: width 2s; /\* Safari \*/  
\}  
  
过渡属性

属性    描述  
transition    简写属性，用于在一个属性中设置四个过渡属性。  
transition-property    规定应用过渡的 CSS 属性的名称。  
transition-duration    定义过渡效果花费的时间。默认是 0。  
ransition-timing-function    规定过渡效果的时间曲线。默认是 “ease”。  
transition-delay    规定过渡效果何时开始。默认是 0。  
CSS3 动画  
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。  
指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称  
规定动画的时长  
@keyframes myfirst  
\{  
    from \{background: red;\}  
    to \{background: yellow;\}  
\}  
   
@-webkit-keyframes myfirst /\* Safari 与 Chrome \*/  
\{  
    from \{background: red;\}  
    to \{background: yellow;\}  
\}

div  
\{  
    animation: myfirst 5s;  
    -webkit-animation: myfirst 5s; /\* Safari 与 Chrome \*/  
\}  
  
可以使用百分比来规定变化发生的时间

@keyframes myfirst  
\{  
    0%   \{background: red;\}  
    25%  \{background: yellow;\}  
    50%  \{background: blue;\}  
    100% \{background: green;\}  
\}  
   
@-webkit-keyframes myfirst /\* Safari 与 Chrome \*/  
\{  
    0%   \{background: red;\}  
    25%  \{background: yellow;\}  
    50%  \{background: blue;\}  
    100% \{background: green;\}  
\}  
  
CSS3 动画属性

属性    描述  
@keyframes    规定动画。  
animation    所有动画属性的简写属性，除了 animation-play-state 属性。  
animation-name    规定 @keyframes 动画的名称。  
animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。  
animation-timing-function    规定动画的速度曲线。默认是 “ease”。  
animation-fill-mode    规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。  
animation-delay    规定动画何时开始。默认是 0。  
animation-iteration-count    规定动画被播放的次数。默认是 1。  
animation-direction    规定动画是否在下一周期逆向地播放。默认是 “normal”。  
animation-play-state    规定动画是否正在运行或暂停。默认是 “running”。