纯css实现卡片翻转动画

4,723 阅读3分钟

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」。

前言:

刚下班...开始吧!通过本案例我们可以学习到

  • animation动画的的使用
  • transform相关属性的理解
  • 动画关键帧优化

先来张效果图吧:

end.gif
xdm..掘金这个袋子很漂亮!

实现

首先我们的思路是,创建一个单独的class类,在需要使用翻转效果的时候,直接在元素上添加此类即可达到效果。
需要使用的css属性,我们这边考虑首先通过animation创建动作,并创建动画@keyframes来控制CSS动画序列中的步骤。

一、 静态部分

这一块其实没什么好说的,前面我们思路中提到添加翻转效果class就可以让元素实现效果,所以什么元素不重要! 我们随便添加一个矩形框吧!

<div class="anime-flip"><div>

二、动态部分

我们先分析下动画过程,从简单到优化。

简单:

让元素围绕纵坐标(垂直轴)旋转360deg。 创建animation并设置flip(@keyframes)过程,通过rotateY属性在指定时间周期内实现旋转。

.anime-flip{
    animation: flip 1.5s 1 ease-in-out;
}
@keyframes flip{
  0%{
   transform: rotateY(0deg);
  }
  100%{
   transform: rotateY(360deg);
  }
}

效果如图:

u9tpo-6ik0z.gif

自此就实现了一个简单的元素旋转,那么我直接用transition不就完了(有点s板哈!)。

优化:

我们观察到效果图比较丝滑,有快慢大小缩放等过渡效果,那我们开始吧。
第一步:先自转一圈,然后做个缩放,再转个圈。就像美女跳舞嘛!跳的好看大家都喜欢!

.anime-flip{ animation: flip 1.5s 1 ease-in-out; }

@keyframes flip { //先转个圈圈
	0% {
		-webkit-transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(-1turn);
		transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(-1turn);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
        //再来个圈圈并加点变化

	40% {
		-webkit-transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-190deg);
		transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-190deg);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	50% {
		-webkit-transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-170deg);
		transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-170deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	80% {
		-webkit-transform: perspective(1200px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
		transform: perspective(1200px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	to {
		-webkit-transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(0deg);
		transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(0deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
}

ps:到这就差不多了,其实嘛优化就是细节再细节,到每一个小动作! 代码层面尽量避免使用left top这些来实现平移,我们这里也是用了translateZ来替代,还有scale3d来缩放大小等。

认真阅读代码我们发现这里有几个很重要的知识点:

也就是我们开头说的transform相关属性的一些理解;
perspective指定了观察者与 z=0 平面的距离使具有三维位置变换的元素产生透视效果!
scale3d(sx, sy, sz)调整元素的在3D空间中的维度。
animation-timing-function定义每一个动画周期或者单个关键帧区间的执行节奏。 另外细心的朋友可能发现:animation-timing-function可以用在animation中还可以用在关键帧中,它的参数值还涉及到一个非常有趣的东西-贝塞尔曲线(cubic-bezier)。
上面都附上了比较权威的文档链接,就不多说了。

结尾

通过这个小例子我们抛出一些关于css动画的小思考
哪些属性是可动画的?
transition和animation它们之间有什么区别?
什么是贝塞尔曲线?
最后:
有哪些好用的动画库?