transition
transition:property duration timing-function delay;
- property:指定哪个属性需要过度(例如 width 、bgc等)
注意:all 一次应用全部属性,但不建议全部属性,因为效率低下且所有样式的过度效果都一样,多个属性可以整体逗号隔开 - duration:过度时间
- timing-function:控制过度动画速度(linear-匀速 ease-减慢 ease-in-加速 ease-out-减速 ease-in-out-先加速后减速 steps(n)-可以让过度效果分为指定几次来完成,更多自定义过度速度 cubic-bezier),其中 steps 可以实现打字机效果
- delay:过度效果的延迟
三要素(缺一不可):
1、元素属性改变(可以hover、active等)
2、指定需要改变的属性
3、改变时间
注意:
1、浏览器兼容
2、属性触发结束,默认会动画回原来的样式
3、无法为一些状态值添加过度效果,例如 display 等
perspective
perspective:mpx;(设置三维透视距离,近大远小)
m大小取决多远看图,如果创建一个200px的立方体盒子,perspective < 100px 则相当于在盒子内部看结果,如果 perspective 非常大,那就是站在非常远的地方看盒子,以为 perspective 指定了观察者于 z = 0 平面的距离使三维位置变换元素产生透视的效果,对动画不应用此值
perspective-origin:水平 垂直;(设置相机在水平面的位置,改变观察角度)
transform(都可独立针对xyz一方向改变)
二维:
- transform-origin:水平 垂直;(自定义中心点的位置)
- 旋转:transform:rotate(deg)(默认以中心点顺时针旋转)
- 平移:transform:translate(水平,垂直)(默认参照元素的左上角)
- 缩放:transform:scale(水平,垂直)传入数字代表放大缩小倍数,若只传一个数 则xy同步变化
- 斜切:transform:skew(水平deg,垂直deg)若只传一个数 代表沿x轴斜切,若角度值为正,则往当前轴负方向斜切,反之角度值为负,则正向斜切
- 综合:transform:translate(x,y) scale(num) skew(x,y) rotate(deg);
(会改变坐标系,所以 rotate 不推荐放前面)
三维(二维和三维推荐使用三维,渲染效果更好):
- transform: translate3d(x方向的偏移,y方向的偏移,z方向的偏移);
- transform: scale3d(x方向的缩放,y方向的缩放,z方向的缩放);
- transform: rotate3d(x,y,z,angle)
x,y,z:代表x,y,z方向上的一个向量值,围绕着向量旋转
angle:代表角度
例如:transform: rotate3d(1,0,0,30deg);
transform-style:preserve-3d;(由于页面二维,所以上面三条设置看不出来,想要看效果,需要在父元素中设置此属性)
再结合 translate+rotate 做立方体(先rotate(改变坐标系)再translate(固定数值))
添加 perspective 增强透视效果,对动画不应用此值
/* 立方体动画 */
ul {
width: 200px;
height: 200px;
margin: 100px auto;
transform: rotate3d(1, 1, 0, 0deg);
transform-style: preserve-3d;
position: relative;
animation: lunbo 5s infinite linear;
}
@keyframes lunbo {
form {
transform: rotate3d(1, 1, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 0, 360deg);
}
}
ul li {
width: 2