我们圣诞节想要的就是我们的CSS……

毫无疑问，您一直在关注我们的2012 SitePoint圣诞大特卖 -以冬季乐园为主题的设计盛会（仅限台式机版本）。 屏幕上日渐流行的元素包括溜冰者 ， 跳熊 ， 跳鱼到吸烟机车等 ，还有很多其他东西。

现在，我们为该项目添加了“圣诞节故事模式”，供那些渴望深入研究故事流的人使用。

前往http://xmas.sitepoint.com/story/css查看当天的故事，减去当天的正常销售页面。

您还可以通过添加“＃day /”和日期编号直接链接到特定日期。 例如，此链接将带您直接进入第14天：

http://xmas.sitepoint.com/story/css#day/14

关于设计的一切

概念，布局和插图是哈雷·亚历山大 （ Harley Alexander ）的聪明才智（如果是这样的话……是的！）。 正如他在这篇文章中解释的那样，Michael Sauter构建了我们的后端。 伊恩·科尔曼（Ian Coleman）让所有工作都一起工作，而裘德·阿克亚（Jude Aakjaer）管理着团队和项目。

动画由我决定。 我喜欢与动画混为一谈，圣诞节拍卖会一直是讨论新想法的理想场所。 不，它不适用于非当前浏览器。 是的，确实有些场景可能会使您的CPU稍微有点压力。

我的挑战是：

1. 依靠纯CSS3动画，无需大量使用JavaScript
2. 寻找尽可能多的CSS动画方法

而且我几乎不必改变这些规则。 例如：

1）狗拉雪橇使用CSS（位置：固定）定位，并使用CSS过渡将其移动到位。 但是，我不得不加减法来使狗小跑。

2）您还将注意到火车动画在第5、6和7天从火车上离开烟囱后就冒烟了，就像真正的烟一样！ 我需要一些JavaScript来计算烟囱相对于轨道的位置，然后相对于轨道上的该位置（而不是火车）放置每缕新烟。

因此，实际上，JavaScript被用于动画切换，而不是动画引擎。

如果您对该项目的CSS实质感兴趣 ，请加入我们的Christmas CSS Podling组中的对话。 我会在那儿闲逛，回答问题并获得最有效的反馈。

我还将在新的一年里在SitePoint上写一些更长的动画指导文章，所以请留意这些。

同时，每天检查一下一下， 让我们知道您的想法 。

From: https://www.sitepoint.com/all-we-want-for-christmas-is-our-css/