首页 > 代码库 > css3 tansform transiton animation

css3 tansform transiton animation

2024-07-20 12:00:23   228人阅读

 

************

◆Margin属性：

适合对象:所有元素
是否继承:no
百分比备注:相对于BOX的宽度

 

 

2D Transform 方法

实例

div{transform: rotate(30deg);-ms-transform: rotate(30deg);		/* IE 9 */-webkit-transform: rotate(30deg);	/* Safari and Chrome */-o-transform: rotate(30deg);		/* Opera */-moz-transform: rotate(30deg);		/* Firefox */}

 

 

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

 

 

3D Transform 方法

实例

div{transform: rotateX(120deg);-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */-moz-transform: rotateX(120deg);	/* Firefox */}

 

函数描述
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 转换元素的透视视图。

 

 

Transition过渡属性

 

下面的表格列出了所有的转换属性：

 

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。

 

 

 

实例

 

应用于宽度属性的过渡效果，时长为 2 秒：

 

div{transition: width 2s;-moz-transition: width 2s;	/* Firefox 4 */-webkit-transition: width 2s;	/* Safari 和 Chrome */-o-transition: width 2s;	/* Opera */}

 

注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

 

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：

 

实例

 

规定当鼠标指针悬浮于 <div> 元素上时：

 

div:hover{width:300px;}

 

 

CSS3 Animation动画属性

 

下面的表格列出了 @keyframes 规则和所有动画属性：

 

属性描述CSS
@keyframes规定动画。3
animation所有动画属性的简写属性，除了 animation-play-state 属性。3
animation-name规定 @keyframes 动画的名称。3
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3
animation-timing-function规定动画的速度曲线。默认是 "ease"。3
animation-delay规定动画何时开始。默认是 0。3
animation-iteration-count规定动画被播放的次数。默认是 1。3
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3
animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3
animation-fill-mode规定对象动画时间之外的状态。3

 

下面的两个例子设置了所有动画属性：

 

实例

 

 

 

div{animation: myfirst 5s;-moz-animation: myfirst 5s;	/* Firefox */-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */-o-animation: myfirst 5s;	/* Opera */}

 

 

@keyframes myfirst{from {background: red;}to {background: yellow;}}@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{from {background: red;}to {background: yellow;}}@-o-keyframes myfirst /* Opera */{from {background: red;}to {background: yellow;}}

 

css3 tansform transiton animation


联系
我们