以 30 分钟为增量播放 CSS 动画

您应该了解我的一些事情：

1. 我是个妈妈！我养了条狗！我全职工作！我也有自己的生活！除了实际工作之外，我几乎没有时间从事开发工作。这意味着，如果我的工作不需要某项技能，我就很少有机会花时间提升这方面的技能🤪。

2. 举个我很少涉足的领域：动画。我的艺术细胞也不大。想到要制作动画，我就会感到紧张，因为我觉得自己在这方面做得一塌糊涂。但我确实很佩服那些能制作出精彩动画的人。

所以我这周的小项目是：

每天花30分钟尝试制作一些小动画。之所以说是30分钟，是因为在有人需要我关注之前，我几乎就只有这30分钟的时间了。而且压力也不大——没人能在30分钟内做出很棒的作品，所以我不必对自己抱有太高的期望，但至少我可以在这段时间里玩一玩。

我想在这篇文章中分享我的一些探索，以及分享其他人建造的一些给我启发的东西 🙂

首先：一些文本动画

我第一次尝试动画制作，是受到了Rachel Smith的一部非常精彩的动画的启发，你可以在这里查看

特色：字母上的一些简单 CSS 动画以及 SVG 上的非常基本的动画来创建彩虹。

从那时起，我认为我应该尝试更具原创性，而不是受到别人作品的启发，所以我想出了另一个文本动画，这可能以前也做过，但对我来说是新的：

超越文本

我看到了Aaron Iker做的这个超酷的星级评分动画，就想自己也做一个。虽然比灵感动画的酷炫程度少了 75%，但没关系。

然后我看到了一段超美的宝可梦动画，🤤我太喜欢了♥️。我觉得我可以画一些类似但更简单的。我没办法画一只妙蛙种子和一只皮卡丘一起玩，但我想我可以画一幅日落/月出。

这就是我把它留在的地方！

关于结果的一些想法：

• 我感觉我的技能水平并没有因为这些项目而提高很多……可能和以前差不多。但它给了我尝试和尝试的信心，也让我想在未来做更多。我想如果我继续练习，我会进步的🙂

• 😁 对你来说是一个挑战——总的来说，这是一项有趣的练习，所以我想挑战任何读到这篇文章的人，让他们开始一个类似的项目，方法如下：

1. 选择你想做得更好的事情，每天花 30 分钟，持续一周，看看你能取得什么成果

2. 或者，如果您想继续从事动画创作，请在评论中分享您制作的特别自豪的动画。

感谢你阅读并忍受我对自己构建的愚蠢代码笔的无耻自我推销🤗

荣誉提名：我发现的其他一些很酷的 Codepen 笔：

• 在卡梅克的魔咒下
• 五彩纸屑果酱！
• CSS 3D 太阳系