24创意和唯一的CSS动画示例激发了自己的

是我们有动画的元素。看着CSS，我们看到我们的动画声明与...相关联div选择器。这里最重要的声明是animation-name，绑定关键帧我的动画对我们div元素。下面是几种影响动画的时序和行为的额外声明。

动画本身是用关键帧创建的，由@keyframes规则。关键帧定义了动画的开始状态(内部从{})和它的最终状态(内部至{}）。关键帧我的动画改变我们div的三种风格属性：背景颜色那宽度,最佳。当这三个属性一次动画时，它会产生一致的动画。

在我们的示例中，我们只有一个关键帧。具有多种类型动画的文档可以具有多个关键帧，每个关键帧绑定到不同的元素。

CSS动画示例

下面，我们编译了24个CSS动画示例，范围从基本的互动效应到文字艺术品（至少根据我）。随意使用它们在您自己的项目中获得灵感。

1. CSS小鼠悬停过渡效果

从灯光开始，这个动画显示了一个简单但有效的文本高亮效果，由鼠标悬停动作触发。这是一个为你的页面链接添加一些额外功能的好方法。

看笔CSS鼠标掉过渡效果亚当argyle（@argyleink.） 上Codepen.。

视图的代码在这里。

2.简单的装载旋转器

CSS动画可以用来创建我们都很熟悉的效果——这些旋转加载图标就是一个例子。它们的意思几乎是普遍理解的，而且它们对代码也很轻。这个特殊的例子还展示了如何使用可缩放矢量图形。

看笔简单的HTML和SVG加载微调器史蒂芬·德莱尼(@sdelaney.） 上Codepen.。

视图的代码在这里。

3.滚动文本动画

这是增强文本的另一种很酷的方法，该代码片段应用了类似老虎机的效果，将单词旋转进或旋转出视图。这是网站上的一种常见技术，需要传达他们的作品的多功能性。你的产品是高效的，用户友好的，可持续的吗?把这些词插入一个像这样的动画中。

看笔文本动画yoann（@yoannhel.） 上Codepen.。

视图的代码在这里。

4.动画提交按钮

用户欣赏小型，意外的愉悦的时刻，即精明的设计师喜欢在整个网页上撒上闪闪发光。此提交按钮是一种干净，令人愉悦的方式，提供视觉反馈，指示操作已完成，例如正在提交的表格。

看笔提交按钮纯css动画逐死像素（@dead_pixel.） 上Codepen.。

视图的代码在这里。

5.悬停响应徽标

在下面的笔的右下角查看标识 - 此动画适用一个微妙的动画在鼠标悬停。这是另一个用于用户的视觉提示，使您的网站推导您的网站更令人愉快。

看笔模板：徽标作者:Alex Katz@katzkode） 上Codepen.。

视图的代码在这里。

6.打开信封

这个优雅的动画是我最喜欢的例子之一，请密切关注细节。从向下运动随着信封打开，向纸上的细节到下面的阴影，很明显触摸多达一个平滑，相干的动画。这将成为一个很棒的按钮或滚动动画。

看笔动画CSS邮件按钮杰克吉尔斯 - 菲利普斯（@jakegilesphillips.） 上Codepen.。

视图的代码在这里。

7.热咖啡

下面的片段举例说明了动画如何沿途。在这种情况下，将CSS动画应用于翻译，规模和透明度褪色将生命添加到另一种普通的绘图中。

看笔热咖啡赞恩·韦斯利(@zanewesley） 上Codepen.。

视图的代码在这里。

8.咖啡机

我们爱喝咖啡，再来一杯。在这种情况下，动画不会窃取焦点。相反，它加强了围绕它的精心设计，使整个元素感觉更身临其境。

看笔咖啡机纯CSS动画通过Henrique Rodrigues（@hjdesigner.） 上Codepen.。

视图的代码在这里。

9.按钮乱伸

需要将用户绘制到特定的动作？代替彩色闪光或模态，考虑向按钮添加Quirke Wiggle效果。它是一种友好而有效的方法，可以捕捉注意力，而没有看似侵入性或显着扰乱游客的流程。

看笔保存按钮乱挂由Donovan Hutchinson（@donovanh） 上Codepen.。

视图的代码在这里。

10. Pacman.

我不建议在您的网站上将这一个放在您的网站上的版权侵权风险，但无论如何都很有趣。

看笔吃豆子通过riccardo（@ferie.） 上Codepen.。

视图的代码在这里。

11.三点装

另一个实例的CSS动画创建加载效果我们中的许多人都很熟悉。简单的规模变化就是所需要的，“请只是片刻。”

看笔CSS装载器带点作者:Alexey Peterson (@petersonby.） 上Codepen.。

视图的代码在这里。

12.文件的抽屉

为了让你的菜单充满活力，考虑下面的纯CSS文件抽屉。它的橱柜在鼠标悬停时略微打开，帮助您的主要导航从其他导航脱颖而出。

看笔纯CSS抽屉ʕʕ•ᴥ•ʔノ（┻━┻jhey（@ JH3Y.） 上Codepen.。

视图的代码在这里。

13.颜色粉丝

下面这个例子特别适用于以设计为中心的商业网站——尝试用你的调色板来创建一个扇形的效果，改变基本的彩色方块。

看笔颜色调色板与纯CSS动画通过nitish khagwal（@nitishkmrk） 上Codepen.。

视图的代码在这里。

14.3 d拨动开关

ON / OFF开关是UI设计的钉。此示例对概念进行了三维旋转，完成了用于切换状态的平滑动画。在这里，开发人员已经将CSS复选框输入元素修改为更有趣的东西。

看笔用孔柄切换开关作者Jon Kantner (@jkantner.） 上Codepen.。

视图的代码在这里。

15.潜艇

CSS适用于平面，彩色插图和动画。下面的代码结合了几种效果来绘制 - 相当坦率地 - 可爱的潜艇。我建议的唯一变化是使它变黄。

看笔潜水艇与CSS.由Alberto Jerez（@ajerez.） 上Codepen.。

视图的代码在这里。

16.动画标题文本悬停

Olivia Ng的“Hover效果为标题”示例探讨了几种方法可以向标题文本添加动态。它显示了几乎只有几个关键帧可以提升您的标题。

看笔悬停效果标题由olivia ng（@oliviale.） 上Codepen.。

视图的代码在这里。

17.浮动形象

“浮动”效果是一个微妙的，简单的，有效的使用CSS动画。在本例中，它用于显示具有良好效果的图标。

看笔浮动动画 - CSS由Mario Duarte（@mariodesign.） 上Codepen.。

视图的代码在这里。

18.宇航员

这是浮动效果的另一个聪明的使用，与友好的脱离世界插图配对。又一个微妙的CSS动画效果的例子，以增强页面元素的感觉。

看笔纯CSS宇航员动画编码艺术家(@ Coding-artist） 上Codepen.。

视图的代码在这里。

19.最小的猫

此示例使巧妙地使用负空间与一些完整的CSS动画相结合。这是一个简单的设计，与众不同CSS转换属性独自的。

看笔Pure CSS Cat动画约翰·穆切特(@johanmochet.） 上Codepen.。

视图的代码在这里。

20.生长/萎缩的棒

CSS可用于动画可视化，更有效地传达您的发现。此示例演示了色彩和速度如何为动态条形图创建不同的感觉 - CSS动画让您在动画中更改速度和重复次数。

看笔标志的玩乐时间通过丹贩卖（@dazld） 上Codepen.。

视图的代码在这里。

21.激光标签

我承认这是我们更复杂的例子之一。但是，它使其成为一个独特而迷人的加载显示，以应对一个简短的时期。

看笔发光装载机 - 纯CSS动画通过maxime rossignol（@Maxoor） 上Codepen.。

视图的代码在这里。

22.蜡烛

这里有一个很好的例子，说明了CSS动画是如何讲述一个故事的，虽然很短。你可能需要大量的练习才能做到这一点，但它肯定会吸引那些第一次访问你网站的人。

看笔有趣的蜡烛纯css动画凯文大卫（@kevin_david_k.） 上Codepen.。

视图的代码在这里。

23.快速卡车

Chris Johnson的《Speedy Truck》巧妙地利用视差模拟了一辆卡车在自然环境中的行驶。虽然极简主义，这支笔用变换属性的几个创造性的使用来弥补它-甚至有一点凹凸不平的道路。

看笔快速的卡车作者:克里斯·约翰逊(@ChrisJohnson） 上Codepen.。

视图的代码在这里。

24.里面有雪花的球形玻璃器

我们能找到的最舒适的例子是，这个雪花球动画为你的页面添加了一种氛围，这是用静止图像无法获得的。注意雪是如何只在“玻璃”球的范围内活动的。

看笔圣诞节雪地球动画编码艺术家(@ Coding-artist） 上Codepen.。

视图的代码在这里。

最后一个例子

正如我们所看到的那样，只有一个触及的CSS动画可以在制作对您的访客的更加沉浸体验中进行很长的路要走。最好的动画服务于您的内容和体验，不会分散或出现Gimmicky - 上述所有示例都非常畅销这一平衡。

但是，我们无法抗拒添加一个吹嘘我们的最后一个例子。这个“钟表塔”示例可能超出了这件作品的范围的复杂性，但它也证明了单独的CSS和HTML可以实现。

看笔观看塔纯CSS动画travis doughty（@tdoughty） 上Codepen.。

对于像这样的更多这些令人敬畏的小插曲，看看创造者的Codepen概况并开始为自己思考想法。

最初发布于3月1日，2021年7:00:00，Updated 01 0001