动画库

快秃头的小猿子

于 2019-11-11 22:41:06 发布

阅读量126

点赞数

本文链接：https://blog.youkuaiyun.com/minjiayanm/article/details/103020006

版权

本文详细解析了动画效果的设计过程，从分析动画运动轨迹到利用CSS属性实现各种动画效果，如弹跳、闪烁、缩放及拉伸等。通过划分动画轨迹的百分比区间，调整属性值，创建生动的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画分析过程
1.分析动画运动轨迹
2.想一下那些css 属性可以实现注意的效果
3.根据轨迹变化，进行百分比划分(不一定是等分)
划分方式，找到几个特殊的[峰值]，在峰值和峰值之间进行区分
4.在每个不同的百分比区间更改属性的值
5.如果是渐进式，值越来越小，直到回到最初的状态

    动画运动轨迹
    常用的： 平移  旋转   拉伸   显示隐藏： 透明度
<h1>展示自己的动画样式</h1>
<h2 class="zc-animation bounce infinite">Bounce弹跳动画</h2>
<br>
<h2 class="zc-animation flash delay-2s slower infinite">Flash闪烁动画</h2>
<br>
<h2 class="zc-animation flasher infinite">Flasher3频动画</h2>
<br>
<h2 class="zc-animation pules infinite ">pules缩放</h2>
<br>
<h2 class="zc-animation pulesFont infinite">pules缩放</h2>
<br>
<h2 class="zc-animation rubberBand infinite">rubberBand拉伸</h2>