animate.css 源码解析 css3重点 css重点 实践中的学习

这些是animation.css中比较典型的一些动画

bounce

在bounce.css 中 主要用到了  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 这个css属性。

animation-timing-function  指定动画一个周期之内运动的速度。所以这个是用来控制

值可以有 匀速 加速  什么linear , ease, ease in 什么的。还可以使用一个函数cubic-bezier(n,n,n,n) ；贝塞尔曲线函数

每个值都是0-1之间的数字

可以在这个网站 https://cubic-bezier.com/ 来看函数通过不同参数的曲线形态。 自己调试想要的效果。

在animation.css中关于运动的都是使用了这个函数。

flash

flash 是改变了透明度，交替变成不透明和完全透明 使效果可以一闪一闪的。

headShake

这个摇头的效果，使用了 translateX和rotateY ,这个是css3中的2D变形。

在2D变形中有平移，旋转，缩放，倾斜。在参数中都是通过角度和尺寸，比例来改变元素的变形。

这个动画中，translateX 和 rotateY  通过在X轴的运动幅度的变小和y轴角度的变小。使摇头动画缓慢的停下来。

这个地方看起来这么简单还真的有一个容易被忽视的重点。先translate再rotate,和先roatate再translate会有不同的区别。

 

heartBeat

scale是缩放的实现，通过放大缩小来  模拟心脏的动作。

这个多了一个translate3d 

① translate3D 可以调用GPU进行3D加速。translate 因为是 2D 移动，所以不会调用GPU进行3D加速

② translate3D 可以在一个Z轴 方向进行移动，正值会感觉距离更近，负值会感觉更远。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translateZ
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate

jello

 

pulse

translate3d它的坐标定义了在每个方向上完成多少缩放。如果所有三个坐标都相等，则缩放比例是均匀的，并且将保留元素的长宽比。

一个正方体，transform: scale3d(0.5,1,1);  就会成为现在这样

注意：如果是负值，transform: scale3d(0.5,1,-2)该维度上为点反射。值为1无效。

swing

rotate3d() 有四个参数，分为两组，前三个是通过x轴，y轴和z轴共同确定了旋转轴。第四个参数就是围绕旋转轴转的度数。正数是顺时针，负数你时针。

这个swing动画，x轴和y轴默认，z轴就是旋转轴，也就是绕着z轴正反转，角度越来越小，到停下来。

wobble

注意代码的执行顺序，先进行3d平移，在进行3的旋转。