css使用定义动画anima,CSS Transform和动画

Transform

CSS3中引入的transform属性可以让元素实现变形，旋转，缩放等视觉效果。

2D变化

2D的transform应用在x和y轴上，而3D的则多了一条z轴。

1. Rotate旋转

.box {

transform: rotate(20deg); //顺时针

}

.box2 {

transform: rotate(-20deg); //逆时针

}

可以将一个元素绕着旋转点进行0到360度的旋转操作。默认的旋转点是在元素的中心点上(50% 50%)。

2. Scale缩放

.box {

transform: scale(.5); //缩小为原来的一半

}

.box2 {

transform: scale(2); //放大为原来的两倍

}

你也可以只针对宽度或者高度进行缩放操作。

.box {

transform: scaleX(2); //将宽度变为原来的两倍

}

.box2 {

transform: scaleY(.25); //将高度变为原来的25%

}

3. Skew 倾斜

.box {

transform: skewX(-5deg); //X轴顺时针旋转5度

}

.box1 {

transform: skewY(20deg); //Y轴逆时针旋转20度

}

.box3 {

transform: skew(-5deg, 20deg); //同时作用在X和Y轴上

}

4. Translate 平移

.box {

transform: translateX(-10px); //在横轴上向左平移10个像素点

}

.box2 {

transform: translateY(20%); //在Y轴上向下平移其自身高度的20%

}

.box3 {

transform: translate(-10px, 20%); //同时在X轴和Y轴上平移

}

5. Matrix矩阵

矩阵形式是将变形函数组合成一个矩阵形式进行使用的，通常都需要借助工具。更详细的说明可以参考这里。

这些变形模式可以同时作用在一个元素上。如

.box {

transform: roateX(20deg) skew(20deg, 45deg) translateX(20px) scale(2, 2);

}

Transfrom Origin

默认的变换原点是在元素的中心，如果我们想要改变它，可以使用属性transform-origin。它接受两个值，分别指定X和Y轴上的位置。可以使用px或百分比作为单位,也可以使用bottom,left等值进行定义。

.box {

transform: rotate(15deg);

transform-origin: 0 0; //以左上角点为变换点进行旋转

}

3D变化

3D是以2D变化为基础的，只是增加了一个z轴。这条z轴是可以看做一个虚拟垂直与屏幕的坐标轴，它代表在元素的远近距离。其中正值代表离屏幕越近，负值代表离屏幕越远。

Perspective

perspective在中文中翻译为透视，这个属性值在应用中主要是用来指定元素离观看者的距离，值的设定一般来说设置为< 300px时会有强烈失真，500~1000px失真中等，2000px以上失真轻微。

定义perspective属性可以选择直接定义在transform中，如：

.box {

transform: perspective(300px) rotateX(20deg);

}

也可以选择定义在父元素上，这样，所有子元素都将使用这个值:

.parent {

perspective: 300px;

}

.child {

transform: rotateX(20deg);

}

perspective-origin

这个属性是叫做“透视原点”，可以使用X轴与Y轴的长度数据或百分比，以及left/center等值进行设置。默认值为50% 50%。可以看做镜头在平面上的距离。

backface-visibility

这个属性用来控制是否可以看到被挡住的那些面，它的值分为visible或hidden。

Transition

transition主要是用来做过渡效果的，可以提供使元素间的变化显得不那么生硬。

属性

值

作用

transition-property

CSS属性值

定义哪些CSS属性会应用transition

transition-duration

时间

定义transition的持续时间

transition-timing-function

时间函数：ease|linear|ease-in|step-start等

用来控制过渡效果速度函数的

transition-delay

时间

延迟

transition属性的合并用法是按照上述的属性顺序进行定义的。缺失的将使用默认值。

.box {

transition: all .5s ease;

}

Animation & Keyframes

要使用CSS动画，需要先定义一个关键帧(keyframes)。关键帧指明在特定时间点元素所展示出来的样式状态。触发的时间点用百分比表示，其中from关键字相当于0%,to关键字相当于100%。在定义关键帧中元素样式时候,!important关键字会被忽略。

@keyframes animationName {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

}

@keyframes fadeFromTo {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

animation的属性有

属性

值

作用

animation-name

定义的keyframes名字

用来获取定义的动画效果

animation-duration

时间长度

用来指定动画从开始到结束所用时间

animation-delay

时间长度

延迟时间

animation-iteration-count

数字(可以使用小数) 或 infinite(无限)

动画循环播放次数

animation-timing-function

linear等

定义动画播放函数，用以控制播放速度曲线

animation-fill-mode

none,forwards,backwards,both

指定当动画播放结束的时候应用到元素上的样式

animation-direction

normal,reverse,alternate,alternate-reverse

控制动画是否反向播放

其简写形式为:

animation : || || || || || || ||

多个动画

当要对一个元素添加多个动画效果时，需要用,分隔开来，如：

.element {

animation: fadeIn 4s 1s infinite linear alternate,

rotate 4s 1s infinite linear alternate;

}

@keyframes fadeIn {

to {

opacity: 0;

}

}

@keyframes rotate {

to {

transform: rotate(180deg);

}

}