你所不知道的 CSS 动画技巧与细节

div {
transform-style: preserve-3d;
perspective: 500px;
}

接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：

@keyframes rotate {
0% {
transform: rotateX(0deg) rotateZ(0deg);
}
50% {
transform: rotateX(40deg) rotateZ(180deg);
}
100% {
transform: rotateX(0deg) rotateZ(360deg);
}
}

效果如下：

Wow，这里需要好好理解一下。由于内容

content

层是静止的但其实外层两个图层都在旋转，通过设置额外的

rotateX(40deg)

，相当于叠加多了一个动画，由于正反旋转抵消了，所有整个动画只能看到旋转的

rotateX(40deg)

这个动画，产生了上述的效果。

CodePen Demo — Css正负旋转相消动画

动画相同，缓动不同

好的，继续下一个小技巧。

有的时候我们页面存在一些具有相同动画的元素，为了让动画不那么死板，我们可以给相同的动画，赋予不同的缓动函数，来达到动画效果。

假设我们有如下的结构：

<div class="container">
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
</div>

样式如下：

我们给它们相同的动画，但是赋予不一样的缓动函数（animation-timing-function），就像这样：

.ball1 {
animation: move 1s ease-in infinite alternate;
}
.ball2 {
animation: move 1s linear infinite alternate;
}
.ball3 {
animation: move 1s ease-out infinite alternate;
}
@keyframes move {
100% {
transform: translateY(5vw);
}
}

这样，一个简单的 loading 效果就制作好了。（当然这个技巧比较简单，学会合理运用是关键）

CodePen Demo — 动画相同，缓动不同

奇妙的缓动

缓动函数 timing-function 在动画中占据了非常重要的地位。

当你不想使用 CSS 默认提供的

linear

、

ease-in

、

ease-out

之类缓动函数的，可以自定义

cubic-bezier(1, 1, 0, 0)

，这里有个非常好用的工具推荐，下面这个网站，可以方便的调出你需要的缓动函数并且拿到对应的 cubic-bezier 。