css动画transition、transform、animation
1、transition
transition: [属性名] [持续时间] [速度曲线] [延迟时间];
过渡效果
• linear匀速过渡
• ease缓进缓出
• ease-in
• ease-out
• ease-in-out
• cublic-bezier(n,n,n,n)贝塞尔曲线
1、单个属性过渡
transition: CSS属性名1 过渡时间 过渡效果 过渡延迟时间
2、多个属性过渡
transition: CSS属性名1 过渡时间1 过渡效果1 过渡延迟时间1 , CSS属性名2 过渡时间2 过渡效果2 过渡延迟时间 2
3、过渡事件 transitionend
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
element.innerHTML = “过渡时间结束!";
}, false);
2、transform
元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜
可选参数:
• scale(x, y)定义 2D 缩放转换,元素的x,y轴进行缩放转换
• scaleX(n)定义 2D 缩放转换,元素x轴进行缩放转换
• scaleY(n)定义 2D 缩放转换,元素y轴进行缩放转换
• skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
• skewX(angle) 2D 倾斜转换,沿着 X 轴。(相当于Y轴做了一定角度的倾斜)
• skewY(angle) 2D 倾斜转换,沿着 Y 轴。
• angle 表示旋转的角度,单位是deg,逆时针45度 45deg;顺时针45度 -45deg
• translate(x,y)2D 移动转换,沿着 X 和 Y 轴移动元素。
• translateX(n) 2D 移动转换,沿着 X 轴移动元素。
• translateY(n) 2D 移动转换,沿着 Y 轴移动元素。
• translateZ(n) 3D 移动转换,沿着 Z 轴移动元素。
• x, y, n 表示移动的距离 (length) 。例如 200px
• 变换中心点对位移函数 translate()不其起作用
• 位移过大会导致父元素出现滚动条,此时需对父元素设置over-flow: hidden
• rotate(angle) 2D 旋转,沿Z轴旋转角度
• 改变变换中心点的位置,可以实现不同的旋转效果
• rotateX(angle)3D 旋转,沿X轴旋转角度,
• rotateY(angle)3D 旋转,沿Y轴旋转角度
3、animation
@keyframes mykeyframes {
from{
background-color: orange;
}
20%{
background-color: blue;
}
50%{
background-color: red;
transform: scale(.5);
}
to{
background-color: green;
transform: scale(2);
}
}
//from{} = 0%{}
//to{}=100%{}
0%, 90%{
background: url("img/1.png") no-repeat;
background-size: 100%;
}