一个CSS3动画入门的栗子
时间：2023-03-12 19:47:07
科技观察
最近杂事很多，很多知识没有及时总结。是时候总结一下，开始新的篇章了~本文不一一列举CSS3动画的属性。如果需要了解API，可以去MDN。在我们开始栗子之前，我们先补一下基础知识。CSS3动画分类：tween动画——连贯动画逐帧动画——使用steps过渡方式实现跳跃动画常用属性和场景：animation:namedurationtiming-functiondelayiteration-countdirection；1.timing-function属性：ease指定一个慢开始，然后快，然后慢结束的过渡效果。ease-in指定以低速开始的过渡效果。ease-out指定以较慢的速度结束的过渡效果。ease-in-out指定以缓慢的速度开始和结束的过渡效果。线性动画从开始到结束具有相同的速度。cubic-bezier(n,n,n,n)cubic-bezier函数中自带值，n的取值为0~1steps()2.delay属性：用于错开动画和其他动画的执行时间，动画落在不同的时间点。这个属性很有用~动画原理：运动一般都有惯性，所以应该先快后慢的反弹。如果使用多星背景闪烁，错位闪烁和JS使用slide.addEventListener("webkitAnimationEnd",function(){console.log('eeee')//动画结束后调用});在某些情况下，我们需要保证在动画结束后，对于一些其他的交互，可以使用这个事件监听器。实战练习：如果我们需要实现这样一个简单的动画：仔细观察上面的动画，我们发现它可以由以下三部分组成：1.进入动画——从右向左移动2.左右循环移动3.stepbystep帧动画的实现方法：使用3个dom元素，最外层dom实现入口动画，第二层dom实现左右移动，第三层dom实现逐帧动画。优点：调试方便，节省时间。缺点：dom较多。1.dom结构
2.分析动画形成的时间线：入口动画持续0.6s，只播放一次，左右移动，逐帧动画持续2s，循环播放，代码如下：:anima_sprite2sstep-end.6sinfiniteboth;}3.使用steps()实现逐帧动画：使用如下精灵图，通过改变background-position实现动画切换。腾腾腾，效果如下图，是不是很失望？原因：由于动画默认以ease模式转场，会在每个关键帧之间插入tween动画，所以动画效果是连贯的。此时可以使用steps()取消补间动画。贴一张图：steps(1,start):从动画开始跳到100%，直到这一帧结束（不是整个循环）==step-startsteps(1,end):保持0%风格直到这一帧（不是整个循环）end==step-end接下来我们把timing-function改成step-end，效果如下：animation:sprite2sstep-end.6sinfiniteboth;想要的效果出现了~不错。完整的css代码如下：.anima_entrance{position:absolute;z-index:3;top:5.1rem;left:4.05rem;width:12.9rem;height:19.1rem;-webkit-animation:anima_entrance.6sease-in-outboth;动画：anima_entrance.6sease-in-outboth;}.anima_move{width:218px;height:382px;position:absolute;z-index:1;top:0;left:42px;-webkit-animation:anima_move2slinear.6sinfiniteboth;动画：anima_move2slinear.6sinfiniteboth;}.anima_sprite{width:218px;height:382px;background:url(demo.png)no-repeat00;background-size:25.8rem19.1rem;-webkit-animation:anima_sprite2sstep-end.6sinfiniteboth;动画：anima_sprite2sstep-end.6sinfiniteboth;}@keyframesanima_entrance{0%{-webkit-transform:translate3d(18.75rem,0,0);transform:translate3d(18.75rem,0,0);}100%{-webkit-变换：translate3d(0,0,0);transform:translate3d(0,0,0);}}@keyframesanima_move{0%,16%,42%,74%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}29%{-webkit-transform:translate3d(-1rem,0,0);transform:translate3d(-1rem,0,0);}87%{-webkit-transform:translate3d(1rem,0,0);transform:translate3d(1rem,0,0);}}@keyframesanima_sprite{0%,16%,42%,58%,74%,100%{background-position:-12.9rem0;}8%,50%,66%{background-position:00;}}
