「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」。
前言:
刚下班...开始吧!通过本案例我们可以学习到
- animation动画的的使用
- transform相关属性的理解
- 动画关键帧优化
先来张效果图吧:
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);
}
}
效果如图:
自此就实现了一个简单的元素旋转,那么我直接用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它们之间有什么区别?
什么是贝塞尔曲线?
最后:
有哪些好用的动画库?