- 隐藏背面
Backface-visibility:hidden;
- 关键帧动画
创建关键帧动画
方式一:@keyframes 动画名{
From{初始状态} 此项可以省略
To{结束状态}
}
方式二:@keyframes 动画名{
0%{初始状态} 此项可以省略
50%{状态一}
70%{状态二}
....
100%{最终状态}
}
引入关键帧动画 animation:
动画名称
时间
执行次数(默认1次 infinite 无限次循环)
运动形式(ease默认 ease-in ease-out ease-in-out linear匀速 steps() 步长)
延迟执行时间
动画下一次如何执行(alternate 方向 alternate-reverse 开始反向执行)
动画执行完成之后保留在那个状态(默认是恢复到初始床头 forwards保留在最后一个状态)
动画是否执行(running 执行 默认 paused暂停)
鼠标划上停止:animation-play-state: paused;
注意:如果想引入关键帧动画至少要存在两个属性值 动画名称 执行时间
animation-name: dong; 动画名称
animation-duration: 3s; 动画执行时间
animation-delay: 1s; 动画延迟执行时间
animation-timing-function: linear; 运动形式
animation-direction: alternate; 下一个周期如何运动
animation-fill-mode: forwards; 动画执行完成之后保留的状态
animation-iteration-count: 3; 动画执行次数
animation-play-state: paused; 动画是否执行
- Transition与animation的区别
相同点:都存在过渡效果,都可以设置时间 延迟时间 运动形式
不同的:transition一般需要绑定在某个元素的动作上(需要事件的支持)animation可以实现浏览器打开自动执行效果;
Transition想要执行多次需要多次触发对应事件 执行完成之后就回到初始状态
Animation 可以直接设置执行次数 可以执行过程中暂停 执行完成之后可以保留在最后的位置
- 3d属性transform
- 景深属性 perspective
在多远的距离去观察这个事物
两种使用方式:
第一种直接写perspective:值(此写法必须写给父元素)
第二种写给元素 本身 transform:perspective(值)
值越小效果越大,值越大效果越小
- 旋转函数
X代表上下 正值向上 负值向下
Y代表左右 正值向右 负值向左
Z 代表前后 正值向前 负值向后
Rotate3d(x,y,z,角度)
Xyz的取值0-1 0不旋转 1旋转 此方式有局限角度只能是一个
- 缩放 scale3d(x,y,z)
- 偏移translate3d(x,y,z)
X 代表水平 左右 正值向右 负值向左
Y代表垂直 上下 正值向下 负值向上
Z代表平面 前后 正值向前 负值向后
- Transform-style:preserve-3d 3d空间的透视效果