transform，animation

移动：

translate(x,y):定义2D转换

translate3d(x,y,x)定义3D转换；

translateX(x) translateZ(z) translateY(y) 分别为xyz各轴的转换

缩放：

scale(x,y) 定义2D缩放 scale(y) scale(y) scale(z)定义各轴缩放；

旋转：

rotate(angle) 定义旋转角度 rotateX(angle)rotateY(angle)rotateZ(angle)定义各轴旋转角度；

倾斜：

skew(x-angle,y-angle)定义2D倾斜转换
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。

如：translate : translate(100px,20px);

2、translateX(n) 定义 2D 转换，沿着 X 轴移动元素。

如：transform:translateX(100px);

3、translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

如：transform:translateY(20px);

二、旋转rotate
rotate(angle) 定义 2D 旋转，在参数中规定角度。

如：transform:rotate(30deg);

三、缩放scale
注意：默认值是1，它的值放大是比1大，缩小比1小。

1、scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。

如：transform:scale(2,1.5);

2、scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

如：transform:scaleX(2):

3、scaleY(n) 定义 2D 缩放转换，改变元素的高度。

如：transform:scaleY(2):

四、扭曲skew
1、skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

如：transform:skew(30deg,10deg);

2、skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

如：transform:skewX(30deg);

3、skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

如：transform:skewY(10deg);

animation

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-name
为 @keyframes 动画指定一个名称：：

animation-name:mymove;
-webkit-animation-name:mymove;

animation-duration
两秒完成动画
animation-duration:2s;

animation-timing-function
从开始到结束以相同的速度播放动画:
animation-timing-function:linear;

animation-delay
等待两秒，然后开始动画：
animation-delay:2s;

animation-iteration-count
播放3次
animation-iteration-count:3;
实例
.element {
height: 250px;
width: 250px;
margin: 0 auto;
background-color: red;
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}

@keyframes stretch {
0% {
transform: scale(.3);
background-color: red;
border-radius: 100%;
}
50% {
background-color: orange;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}

body,
html {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
}

.element {
height: 200px;
width: 200px;
background-color: red;
-webkit-animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate;
border-radius: 100%;
}

@-webkit-keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}

@keyframes pulse {
0%, 100% {
background-color: red;
}
50% {
background-color: orange;
}
}
@-webkit-keyframes nudge {
0%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(150px, 0);
transform: translate(150px, 0);
}
80% {
-webkit-transform: translate(-150px, 0);
transform: translate(-150px, 0);
}
}
@keyframes nudge {
0%, 100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(150px, 0);
transform: translate(150px, 0);
}
80% {
-webkit-transform: translate(-150px, 0);
transform: translate(-150px, 0);
}
}
html, body {
height: 100%;
}

body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}