移动:
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;
}