animate.css一些实现原理
冀啸
首先是demo的创建
如下,就可以像官网那样每次点击之后就执行一次动画了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate learn</title>
<style lang="less">
@keyframes bounce {
from,
20%,
53%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
.animate
{
animation: bounce 2s;
transform-origin: center bottom;
}
#main{
width: 100px;
height: 100px;
position: absolute;
top: 10%;
font-size: 40px;
}
</style>
</head>
<body>
<div id="main">animate.css</div>
<button id="active">test</button>
</body>
<script>
const animateCSS=(element,animationName)=>{
new Promise((resolve,reject)=>{
const node=document.querySelector(element);
node.classList.add(animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event)
{
event.stopPropagation();
node.classList.remove(animationName);
resolve('animation end');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
})
}
const acticeButton=document.querySelector("#active");
acticeButton.addEventListener('click',()=>{
animateCSS('#main','animate')
})
</script>
</html>
animation各个属性的具体意思
CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
animation-name 动画名字
animation-duration 动画持续执行的时间
animation-timing-function 定义动画的执行节奏,平缓还是陡峭之类的
有以下几个value
1.cubic-bezier(x1,y1,x2,y2) 定时函数
/*
*cubic-bezier() 定义了一条 立方贝塞尔曲线（cubic Bézier curve）。
这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。
*/
P0 是 (0, 0)，表示初始时间和初始状态。P3 是 (1, 1) ，表示终止时间和终止状态。
贝塞尔曲线的 P1或 P2坐标超出[0, 1] 范围可能会产生弹跳效果。
2.linear
linear=cubic-bezier(0,0,1,1)线性变化的
3.ease
ease=cubic-bezier(0.25, 0.1, 0.25, 1.0) 开始时加速地更快，但在接近中间中，加速已经开始变慢了。
4.ease-in
ease-in=cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止
5.ease-out
cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始很快，然后逐渐减慢，直到最终状态。
6.steps
animation-delay 定义动画延迟执行的时间
animation-iteration-count 定义动画执行的次数
为infinite是无限执行 一般为整数的数字个
animation-dirction 指定动画是否反向播放,默认normal
1.normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
2.alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
3.reverse
动画反向运行===每周期结束动画由尾到头运行。
4.alternate-reverse
反向交替运行,也就是先反向运行在正向运行
animation-fill-mode 指定动画执行完成之后,执行动画元素的保留状态
注意,如果是事件触发的动画,只有一直执行事件才会让这个元素的状态保持
比如点击事件只执行一次,就不能让元素的状态保持为最后帧的状态
1.none
目标将保留动画开始之前的css状态
2.forwards
将保留动画最后一帧的状态
3.backwords
将保留动画开始帧的状态,也就是会回到初始帧状态
注意这个状态跟none的状态不一样
4.both
animation-play-state 指定动画的播放状态
running
paused
transform的属性
translate,scale,rorate,skew.martix
一般来说屏幕是绕Z轴旋转,绕XY轴旋转没效果,XY轴的旋转要加perspective才有效果
rotate3d(x, y, z, deg)
x,y,z 的取值是0-1
scale3d(x,y,deg)同理
transform:skew(x,y)
这个skew是斜切属性,它的xy轴与正常的xy轴相反
也就是水平Y轴,竖直X轴
当设置元素为transform:skew（0，30deg）；元素是按照水平方向Y轴顺时针旋转的 只旋转水平
当设置元素为transform:skew（30deg，0）；是按照垂直方向X轴，逆时针旋转的 只旋转竖直
transform:martix(a,b,c,d,e,f)
x,y为当前元素的左上角的坐标
//横列与竖列相乘结果
|a,b,c| |x| |ax+cy+e|
|d,e,f| * |y|= |bx+dy+e|
|0,0,1| |z| |0 + 0+1|
ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
缩放相关
matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);
旋转相关
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
Shake
//左右摇动特效
实现方法 给间隔帧设置相反的移动
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
flash
//闪动特效
实现方法
设置opacity 50和100帧为1
其他中间比如25 和75帧为0
heartBeat
//放大缩小特效
实现方法
设置scale
rubberBand
//橡皮筋效果
实现方法
1.X轴放大,Y轴缩小 2.X轴缩小,Y轴放大
3.X轴放大,Y轴缩小 4.X轴缩小,Y轴放大
swing
//摇摆特效
先上下rotate大幅度,然后小幅度,最后变回原来的状态
Back Entrance
backInDown
//从上方进入
初始化的时候translateY为一个很大的负值
最后translateY为0,中间可以加opacity和scale的效果
其他的left,right,up类似
Back Exits
backOutDown
//从上方出去
初始化translateY为0
类似资料：