告别手写动画困扰，CSS3动画代码片段助你一臂之力

转自：web前端智汇堂

作为前端开发者或学习者，你是否曾为手写各种动画而烦恼不已？复杂的动画效果往往需要大量的代码编写和调试，耗费我们许多时间和精力。今天，我要给大家分享一个宝藏网页，它将彻底解决我们的困扰！

这个神奇的网页提供了一系列 CSS3 动画代码片段，涵盖了各种各样丰富的动画效果，分类清晰，简直是前端开发的福音。接下来，让我们一起详细了解一下这些精彩的动画分类。

1. 引起注意动画效果

这里有多种方式能让你的元素瞬间吸引用户的目光。像“bounce”（弹跳）、“flash”（闪烁）、“pulse”（脉冲）、“rubberBand”（橡皮筋拉伸）、“shake”（摇晃）、“swing”（摆动）、“tada”（欢庆）、“wobble”（摇摆）等动画，无论是用于提示信息、引导用户操作还是增加页面趣味性，都能起到很好的效果。

2. 弹跳动画

包括“bounceIn”（弹跳进入）、“bounceInDown”（向下弹跳进入）、“bounceInLeft”（向左弹跳进入）、“bounceInRight”（向右弹跳进入）、“bounceInUp”（向上弹跳进入）等多种进入方式，以及对应的“bounceOut”（弹跳退出）、“bounceOutDown”（向下弹跳退出）、“bounceOutLeft”（向左弹跳退出）、“bounceOutRight”（向右弹跳退出）、“bounceOutUp”（向上弹跳退出）等退出效果。这些弹跳动画可以为页面元素的出现和消失增添生动感，比如在弹窗的展示和关闭、元素的加载和卸载等场景中使用。

3. 淡入淡出动画

“fadeIn”（淡入）、“fadeInDown”（向下淡入）、“fadeInDownBig”（大幅向下淡入）、“fadeInLeft”（向左淡入）、“fadeInLeftBig”（大幅向左淡入）、“fadeInRight”（向右淡入）、“fadeInRightBig”（大幅向右淡入）、“fadeInUp”（向上淡入）、“fadeInUpBig”（大幅向上淡入）等淡入效果，以及“fadeOut”（淡出）、“fadeOutDown”（向下淡出）、“fadeOutDownBig”（大幅向下淡出）、“fadeOutLeft”（向左淡出）、“fadeOutLeftBig”（大幅向左淡出）、“fadeOutRight”（向右淡出）、“fadeOutRightBig”（大幅向右淡出）、“fadeOutUp”（向上淡出）、“fadeOutUpBig”（大幅向上淡出）等淡出效果。淡入淡出动画常用于页面元素的渐显渐隐，营造柔和的过渡效果，比如图片轮播时的切换、模态框的显示与隐藏等。

4. 翻转动画

“flip”（翻转）、“flipInX”（沿 X 轴翻转进入）、“flipInY”（沿 Y 轴翻转进入）、“flipOutX”（沿 X 轴翻转退出）、“flipOutY”（沿 Y 轴翻转退出）等翻转动画，能够为元素带来独特的交互体验，比如卡片的翻面展示更多信息等场景。

5. 急速动画

“lightSpeedIn”（光速进入）和“lightSpeedOut”（光速退出）这两个急速动画，能让元素以极快的速度出现或消失，给用户带来强烈的视觉冲击，适用于一些需要强调快速响应或紧急提示的场景。

6. 旋转动画

从简单的“rotate”（旋转）到“rotateDownLeft”（向左下旋转）、“rotateDownRight”（向右下旋转）、“rotateUpLeft”（向左上旋转）、“rotateUpRight”（向右上旋转）等不同方向的旋转效果，还有对应的“rotateIn”（旋转进入）、“rotateInDownLeft”（向左下旋转进入）、“rotateInDownRight”（向右下旋转进入）、“rotateInUpLeft”（向左上旋转进入）、“rotateInUpRight”（向右上旋转进入）等进入动画以及“rotateOut”（旋转退出）、“rotateOutDownLeft”（向左下旋转退出）、“rotateOutDownRight”（向右下旋转退出）、“rotateOutUpLeft”（向左上旋转退出）、“rotateOutUpRight”（向右上旋转退出）等退出动画。旋转动画可以用于加载指示器、元素的强调展示等。

7. 特殊动画

“hinge”（合页）和“rollIn”（卷入）、“rollOut”（卷出）等特殊动画，为我们提供了更多创意的可能性，比如模拟门的开关效果、元素的滚动进入和退出等。

8. 放大缩小动画

“zoomIn”（放大进入）、“zoomInDown”（向下放大进入）、“zoomInLeft”（向左放大进入）、“zoomInRight”（向右放大进入）、“zoomInUp”（向上放大进入）以及“zoomOut”（缩小退出）、“zoomOutDown”（向下缩小退出）、“zoomOutLeft”（向左缩小退出）、“zoomOutRight”（向右缩小退出）、“zoomOutUp”（向上缩小退出）等放大缩小动画，常用于图片、图标等元素的突出显示和隐藏，吸引用户关注重要内容。

9. 滑动动画

“slideInDown”（向下滑动进入）、“slideInLeft”（向左滑动进入）、“slideInRight”（向右滑动进入）、“slideInUp”（向上滑动进入）和“slideOutDown”（向下滑动退出）、“slideOutLeft”（向左滑动退出）、“slideOutRight”（向右滑动退出）、“slideOutUp”（向上滑动退出）等滑动动画，在导航菜单的展开与收起、元素的滑动展示等场景中非常实用。

使用这些动画代码片段非常简单，只需将相应的 CSS 和 html copy 下来添加到你的网页上，就能轻松实现各种炫酷的动画效果，无需再花费大量时间手写复杂的动画代码。这不仅提高了我们的开发效率，还能让我们更加专注于项目的其他重要部分。

对于前端学习者来说，这些代码片段也是绝佳的学习资源。通过研究和使用这些动画效果，能够更好地理解 CSS3 动画的原理和实现方式，快速提升自己的前端技能。

如果你还在为手写动画而头疼，不妨赶紧收藏这个网页，让这些 CSS3 动画代码片段成为你的得力助手，为你的前端开发项目增添更多精彩！如果你觉得这篇文章对你有帮助，别忘了点赞、分享给更多的小伙伴哦！

网址：https://www.webhek.com/post/css3-animation-sniplet-collection/#/

以上就是今天为大家带来的前端开发干货分享，我们下期再见！