区分CSS中的 transition / transform / animation 的使用
1.transition 过度效果集合
使用场景:对所有动态修改CSS的操作均有效果,主要有以下几点
- dom位置移动
- opacity,颜色改变
- dom尺寸变更,border
可配合 transform 属性使用
transition有四个参数,默认值为 all 0s ease 0s
,按序分别对应:
- 需要过度的CSS属性名称
- 完成过渡的时间
- 过渡的速度曲线
[ 慢-快-慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear]
- 触发过渡开始的延时时间
2.transform 操作元素 2D 或者 3D 转换、旋转、缩放、移动或者倾斜。
3D效果首先设置 perspective 属性, perspective 值越大3D效果越逼真、线条具备笼统感
配合transtion使用
- 移动 translater(x,y)、translateX()、translateY()、translateZ()、translate3d(x,y,z)
- 旋转 rotate(x,y)、rotateX()、rotateY()、rotateZ()、rotate3d(x,y,z,deg)
- 缩放 scale(x,y)、 scaleX()、 scaleY()、 scaleZ()、 scale3d(x,y,z,deg)
- 倾斜 skew(x,y)、 skewX(deg)、skewY(deg)
skew没有3D属性
3.animaition 动画属性
animation 属性需要配合 keyframes 函数使用,在 keyframes 内规定动画执行轨迹
animation 有以下6个属性:
- animation-name 需要执行的 keyframe 函数名称
- animation-duration 规定完成动画所花费的时间,以秒或者毫秒计
- animation-timing-function 动画的速度曲线
[ 慢-快-慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear]
- animation-delay 规定在动画开始之前的推迟
- animation-iteration-count 规定动画应该播放的次数
次数、infinite
- animation-direction 规定能否应该轮流反向播放动画
normal、alternate
animation 属性在dom样式内执行所选中的 keyframes 函数
keyframes 内可以使用 transform 属性
keyframes 内简写动画过程可以使用 from、to,想控制更多过程可以使用百分比 0% – 100%
@keyframes animationName {from{},to{}}//百分比@keyframes animationName {0%{}10%{}...100%{}}
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 区分CSS中的 transition / transform / animation 的使用
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 区分CSS中的 transition / transform / animation 的使用