过度transformVS动画 animation的效果
发布时间
阅读量：
阅读量
1、过度transform
Transform - CSS (Cascading Style Sheets) | MDN
transform表现出叠加性，在执行多个操作时可以通过transform的复合属性实现连续编写。
通过transform技术达成三维效果时需运用translate3d(x,y,z)属性；然而由于z轴坐标难以直接被视觉感知，在此情况下必须结合perspective属性配合使用
perspective属性具备实现透视效果所需的功能特性，在渲染过程中将该属性赋值给需要展示三维效果的父级节点元素；具体而言，在该属性设置中取值范围是800至1200像素（此处指人眼最佳视敏度对应的视觉距离）。
透视距离也称视距，所谓视距是人的眼睛到屏幕的距离。如图1；
图1
d为视距，z为在z轴上正负移动距离。
立体呈现：transform-style: preserve-3d;使子元素处于真正的3D空间。
2、动画 animation
dynamic effects - CSS (CSS layering) | Mozilla Developer Network
animation的复合写法：
animation_state: 完成状态
为每个动画分配名称及所需时长；无需按照特定顺序排列这些信息；当存在两个时间值时，默认情况下第一个表示动画持续时间；第二个参数则用于描述视频的延迟播放时间；完成后的状态信息中应删除重复的条目以及与动画方向相关的属性
百分比指的是动画总时长的占比
animation拆分写法：
3、不同
transform一般需要配合hover选择器一起，animation不需要。
全部评论 (0)
还没有任何评论哟~