css动画

动画效果图

定义旋转代码：

/*定义动画*/
@keyframes namel {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

}
@keyframes namek {
from {
transform: translate(0px);
}
to {
transform: translate(300px);
}

}
.loading {
position:relative;
}
.n {
margin: 355px 655px;
width: 150px;
height: 150px;
border: 7px solid pink;
border-radius: 50%;
border-left:7px solid #23C523;
border-bottom: 7px solid #23C523;
animation:namel 1s infinite;
margin-top: 55px;

}

 

一些动画属性：

2D转换 - 位移
位移：位置移动
从当前元素的位置处，移动到指定坐标轴位置处
函数：
translate(x,y)
translate(value);
取值：
数值、百分比
去负值
x ：正 向右移动
负 向左移动
y : 正 向下移动
负 向上移动
单方向位移：
translateX(x)
translateY(y)
3、2D转换 - 缩放
缩放：改变元素大小
函数：scale(value)
scale(x,y)

取值：
默认值 1
缩小：0 - 1 之间的小数
放大：大于1
scaleX(x) : 横向缩放
scaleY(y) : 纵向缩放
4、2D转换 - 旋转
围绕着指定点，按照指定的角度发生的旋转
函数：rotate(deg)
取值：deg 为角度 0-360
默认为顺时针旋转
deg取值为负的话，则将逆时针旋转
5、2D转换 - 倾斜
函数：skew()
取值 ：为角度
skewX(x)
skewY(y)
6、3D转换
属性:
perspective : 设置假定人眼到投影平面的距离
只影响3D元素，不影响2D元素

设置位置：加在父元素上，设置好后，其子元素就可以完成3D的转换。
1、3d位移
改变元素在z轴上的位置
属性：transform:
函数：translateZ(z);
translate3d(x,y,z);
2、3d旋转
属性：transform
函数：
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值为 1，0，-1
rotate3d(-1,0,1,45deg);