CSS 动画一站式指南( 二 ) _生活百科

perspective属性也可以用来声明视距效果。
perspective 和 transform:perspective() 都能声明视距，那为何要存在两种声明方式呢？

perspective 与 transform:perspective() 的作用相同
perspective 在 舞台节点 (变换节点的父节点)上使用，transform:perspective() 在 当前变换节点 上使用，也可与其他变换函数一起使用

视距效果在 3D 动画中记得要声明，否则有些 3D 变换效果可能无法得到更好的展现。

值越?。?用户与空间Z轴距离越近，视觉效果越强
值越大，用户与空间Z轴距离越远，视觉效果越弱

1.1.2 变换动画实践1）?
通过纯 CSS 也可以实现一个心形 ? 。

文章插图
使用单个 div 元素结合::before和::after两个伪元素通过错位叠加的方式就可以轻松实现，搞起来。
步骤：

声明 <div> 的尺寸为一个 正方形 并以中心顺时针旋转 45deg
声明两个伪元素继承 <div> 的尺寸并实行绝对定位
声明两个伪元素的圆角率为 100% 并平移到相应位置

在线源码和演示
2）0.5px 边框
在移动端由于屏幕的分辨率较高，因此 1px 边框看起来会有点粗，那么可以直接声明 0.5px 的边框吗？可以，但是即便声明成功了，有些浏览器还是会按照 1px 来渲染。为了实现 0.5px 的边框，我们可以利用 CSS 中的 transform 来实现。

文章插图
步骤：

声明一个伪元素，令其宽高为 200%，border 宽度为 1px
通过transform: scale(.5)将该伪元素缩小为原来的 0.5 倍。

在线源码和演示
1.2 过渡过渡的出现让状态间的切换更加丝滑，先简单介绍一下与过渡相关的属性，相关的动画实践稍候奉上。
1.2.1 过渡属性介绍1）transition-property：属性

all ：全部属性过渡( 默认 )
none ：无属性过渡
String ：某个属性过渡

2）transition-duration：时间

Time ：秒或毫秒(默认 0 )

3）transition-timing-function：缓动函数

ease ：逐渐变慢，等同于 cubic-bezier(.25,.1,.25,1) ( 默认 )
linear ：匀速，等同于 cubic-bezier(0,0,1,1)
ease-in ：加速，等同于 cubic-bezier(.42,0,1,1)
ease-out ：减速，等同于 cubic-bezier(0,0,.58,1)
ease-in-out ：先加速后减速，等同于 cubic-bezier(.42,0,.58,1)
cubic-bezier ：贝塞尔曲线，(x1,y1,x2,y2) 四个值指定于曲线上的点 P1 和 P2 ，所有值需在 [0,1] 区域内

4）transition-delay：时延

Time ：秒或毫秒(默认 0 )

由于 duration 和 delay 的取值都是时间，所以可能会发生混淆。

duration 和 delay 作用于所有节点，包括自身的 ::before 和 ::after
transition 中出现两个时间值时，第一个解析为 duration ，第二个解析为 delay
transition 中出现一个时间值时，解析为 duration

变换属性中一个比较重要的属性是transition-timing-function ，它决定了过渡时间内速度是如何变化的。它的值实际上是一个贝塞尔曲线，推荐一个设置贝塞尔曲线的网站，可以根据需要设计出符合需求的贝塞尔曲线。
1.2.2 过渡动画实践1）IOS 设置页面中的开关按钮
下面这个开关在 IOS 手机的设置面板中太常见了，开关的动画效果利用transition这个属性也可以很轻松地实现，而且这里利用上面讲到的设置贝塞尔曲线的网站调试出了一种贝塞尔曲线使得开关按钮被打开的过程有一个刹车的效果。