空间转换、动画
animation 动画
keyframes 关键帧
infinite 无限
alternate 交替轮流、逆向播放
paused 暂停
forwards 前进
空间转换
空间位移
transform:translateX()
transform:translateY()
transform:translateZ
transform:translate3d(x,y,z)
透视、景深、视拒
perspective 600px-1200px
给父元素添加实现一个近大远小的效果
空间转换
围绕x轴旋转 transform:rotateX()
围绕y轴旋转 transform:rotateY()
围绕z轴旋转 transform:rotateZ()
左手定则 方向的大拇指指向轴线的正值方向为正值旋转的方向
3d呈现 transform-style flat 平面 默认值
preserve-3d 开启3d环境
动画
定义动画
@keyframes 动画名称{
from{}
to{}
}
@keyframes动画名称{
0%{}
50%{}
100%{}
}
调用动画
animation:动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
速度曲线
ease 默认 https://cubic-bezier.com/#.17,.67,.83,.67
linear 匀速
steps() 逐帧动画
次数 infinite 无线次
反向播放 slternate
停留结束位置 forwards
暂停动画 animation-play- state:paused;
动画延迟 animation-delay
单词
