欢迎关注微信公众号：前端神探介绍一个CSS动画合成技巧。先看效果。这是一个非常“动态”的倒计时效果。它通常出现在一些活动的开幕式上。分析整个动画过程，不难发现动画编号的变化有以下几种。放大和缩小。透明度变化。我不认识我的朋友。可以观察吗？下面一起来看看具体的实现。1、数字的变化我们先来看数字的变化。这个技巧在上一篇文章：还在用定时器？CSS也第一次被用在了电子钟上。这里我再介绍一下。以往数字的变化可能需要创建多个标签，然后改变位移来实现54321该方法需要创建多个标签，比较繁琐，不易扩展。现在有一种更简洁的实现方式，那就是CSS@property。这个是来做什么的？简单来说就是可以自定义属性。在此示例中，您可以使数字像颜色一样过渡和动画。你可能不明白。看看这个例子。假设HTML是这样的然后我们通过CSS变量将数字渲染到页面。这里需要用到伪元素和计数器。有兴趣的可以参考这篇文章：Tips:如何使用content属性显示CSSvar变量值倒计时::after{counter-reset:timevar(--t);content:counter(time);}效果如下如何让这个数字发生变化？可以使用CSS动画@keyframescount{to{--t:0}}count-down::after{--t:5;计数器复位：时间变量（--t）；内容：计数器（时间）；animation:count5sforward;}效果如下当前效果只过了5秒，数字从5变为0，并没有5=>4=>3=>2=>1这样的阶段变化.然后最重要的一步来了，添加如下自定义属性@property--t{syntax:'';继承：假的；initial-value:0;}是的，就是加上这一小段CSS，出来的效果是不是很神奇呢？可以理解为通过@property定义后，这个变量--t本身就可以单独动画了，就像颜色变化一样。另外，使用计数器的好处是可以随意改变类型。比如把上面的阿拉伯数字改成中文计数，只需要改变计数器类型即可。完整类型请参考：list-style-typecount-down::after{--t:5;计数器复位：时间变量（--t）；内容：计数器（时间，cjk-decimal）；/*中日韩十进制数*/动画：往前数5秒；}这样的效果是不是很方便？2、倒计时结束上面的计数器的最终终点是“0”，显然我们需要一些特定的提示，比如“Go~”最后一帧的状态怎么改变？这里有两种方式：byanimationcoveragebycountercoverage先看第一种方式，这个比较好理解，重新定义一个动画，倒计时结束后，重置最后一帧@keyframesstop{to{content:'Go~';}}倒计时::之后{--t:5;计数器复位：时间变量（--t）；内容：计数器（时间）；animation:count5sforward,stop5sstep-endforward;}·效果如下注意这里的动画函数是step-end，为什么会这样？step-end也可以写成steps(1,end)。你可以理解为整个动画只有两种状态。在运行过程中，都是初始状态，只有到最后一帧时状态才会发生变化。下面是MDN的截图下面我们来看第二种方式，通过自定义计数器来实现。原理其实有点类似JS的思想。当数字为0时，让计数器指定一个特殊值。具体实现如下@counter-stylestop{system:cyclic;符号：“去~”；range:00;}这里简单解释一下，这里有一个range属性，表示计数器的范围。由于这里只需要指定为0，就是区间00。然后就是system，就是计算系统，这里是cyclic，就是循环使用开发者提供的一组字符，以及字符由符号定义。然后symbols代表计算符号，也就是具体显示的字符，这里指定Go~即可。这部分自定义计数器内容比较复杂，也比较新。有兴趣的可以参考张新旭的这篇文章：CSS@counter-stylerulesindetailedandapplycount-down::after{/**/counter-reset:timevar(--t);内容：计数器（时间，停止）；/*customcounter*/}这样也可以达到同样的效果，实现起来更优雅3.缩放和透明度变化这两个动画其实是同时发生的可以放在一个动画中@keyframesshark{0%{opacity:1;变换：规模（1）；}50%{不透明度：0；变换：比例（0.4）；}}然后设置动画持续时间为1s，循环5次count-down::after{--t:5;计数器复位：时间变量（--t）；内容：计数器（时间）；动画：向前数5ssteps(5)，鲨鱼1s5；如下效果是不是有点突兀？因为数字的变化是突然的，所以需要隐藏数字的变化，直到透明度为0。为了达到这个效果，只需要将闪烁动画延迟0.5秒即可。倒计时::之后{--t:5;计数器复位：时间变量（--t）；内容：计数器（时间）；动画：向前数5ssteps(5)，鲨鱼1s.5s5；/*Delay0.5s*/}这样比较自然但是还有优化的空间。比如现在的数字动画太连贯了。如果希望数字出现后停留一段时间，或者希望数字出现的慢一些，消失的快一些，该如何处理呢？其实这比想象的简单多了，改变关键帧位置即可，如下@keyframesshark{0%{opacity:1;变换：规模（1）；}20%{不透明度：0；变换：缩放（0.4）；}}同时，延迟时间也需要改为0.8秒。效果如下，这样就实现了文章开头所示的效果。下面重点来了~完整代码如下@property--t{syntax:'';继承：假的；初始值：0；}@counter-stylestop{系统：循环；符号：“去~”；范围：无限0；}html，正文{边距：0；高度：100%；显示：网格；放置内容：中心；}倒计时{显示：flex；对齐项目：居中；证明内容：居中；字体系列：Consolas、Monaco、等宽字体；:after{--t:5;--杜尔：1；计数器复位：时间变量（--t）；内容：计数器（时间，停止）；动画：计算calc(var(--t)*var(--dur)*1s)步数(var(--t))向前，鲨鱼calc(var(--dur)*1s)calc(var(--dur)*.8s)calc(var(--t));}@keyframes计数{到{--t:0;}}@keyframes鲨鱼{0%{不透明度：1；变换：规模（1）；}20%{不透明度：0；变换：比例（0.4）；}}youtoo在线示例可访问：CSScount-down(runjs.work)RunJS,前端代码制作与在线分享另外，demo中还有一个小彩蛋，点击重新运行动画，实现方法如下count-down:active::after{animation:none;}4.除了缩放效果，其他动画效果也可以有一些位移动画。例如，@keyframesshark{0%{opacity:1;转换：翻译Y（0）；}20%{不透明度：0；转换：translateY(100px);是不是有点奇怪，效果如下？动画不够连贯，一个往下一个往上。有没有办法从上到下消失和出现？当然也可以，实现如下@keyframesshark{0%{opacity:1;转换：翻译Y（0）；}20%{不透明度：0；转换：translateY(100px);}21%{不透明度：0；转换：translateY(-100px);}}这里添加了一个很“相邻”的关键帧，意思是在透明状态下，位移变化“很快”，这样数字出现时的动画是从上到下的，整体更加流畅，效果如下。还可以调整之前的缩放效果，让它出来的时候更大更震撼@keyframesshark{0%{opacity:1;变换：规模（1）；}20%{不透明度：0；变换：比例（.4）；}21%{不透明度：0；变换：比例（5）；}}效果如下当然还有其他的效果，比如旋转，斜切等，需要你的想象力了~5.总结与解释以上就是本文的全部内容。你学过简单的动画吗？下面总结一下实现要点：可以将复杂的动画分解成多个简单的动画。一个标签，改变位移来实现CSS计数器，可以将数值变量渲染到页面CSS@property来动画CSS变量，就像颜色变化一样。CSS计数器的好处是可以随意改变类型。比如中文倒计时的结束点默认是数字0，您可以通过另一个动画重置最后一帧。您可以使用自定义CSS计数器使某个计数符号呈现为指定字符。当透明度为0时，否则数字会突然变化。数字出现和消失的动画可以添加一个相邻的关键帧快速回到位置。本文中使用了一些较新的属性，例如@property，自定义计数器，但没有关系。文章中还提到了其他解决方案。动画的整体思路保持不变。如何观察和分解动画是最重要的最后一步。如果觉得对你有好处和帮助，请点赞、收藏、转发???欢迎关注微信公众号：前端大侦探
