10个令人印象深刻的CSS3动画例子

来源:设计前沿收集 作者:艾伦·基特尼 时间:2017-08-24

CSS3属性为网页设计师和开发人员开辟了大量新的门户,可以在CSS标记中完全创建动画和交互,而不会靠近Flash,Silverlight或After Effects。下面我们围绕一些最好的CSS3动画实例,包括独立效果和网站。

01. 一个合租的房子

安东&艾琳的网络纪录片使用CSS转换

一个共同的房子是一个网络纪录片分析UX设计师Irene Pereyra在20世纪70年代阿姆斯特丹的一个女权主义公社成长的经历。从你到达的那一刻起,你并不孤单:遵循你的光标移动。

Pereyra和合作伙伴Anton Repponen不是依靠巧妙的滚动技巧,而是从90年代初的游戏“世界哪里是卡门·桑迪戈?”中吸取了灵感?并使用底层屏幕巧妙地暴露探索性内容,为您提供定义自己参与水平的故事的能力。

互动结合讲故事,提供令人着迷的新奇体验。佩雷拉和Repponen坚持通过两年自主资金和自主开展的工作,是重要的:“它使我们能够尝试客户项目中没有空间的纪律和技术,”佩雷拉说。

02. 类型条款

一种动画片类型

类型条款是由曼彻斯特的网页设计机构Supremo创建的动画作弊书。在做了一些研究之后,他们发现大多数现有的有关排版术语的在线信息使用简单静态的图像。该团队正在寻找一个实验SVG和CSS动画的理由,这是完美的机会。

设计师Dan Heywood说:“我决定创造更具视觉吸引力的东西,这将有助于新设计师立即学习所有关键的印刷术语。

该团队强调设计师对排版的了解非常重要。对于那些第一次学习规则的人员,或者有经验的设计师需要进行复习,这个作弊书既是教育性的,也是很高兴的探索。内容重点突出,信息清晰,动画柔滑。

03. Waaark

将鼠标悬停在边界上以获取有趣的动画

Waaark网站上的每一次互动都显示了对细节的非常重视。艺术总监Jimmy Raheriarisoa和前身开发人员Antoine Wodniack,组成法国工作室的人都在思考一切。他们已经计划了场景如何从一个页面转换到另一个页面,文本如何以某种方式消失,以及如何复杂的SVG图形动画。

一切都保持了生命,同时保持了性能和可访问性。该对已经添加了键盘快捷键和滑动手势,以使运动能力广泛的人们的体验更好。

当被问及他们新发布的投资组合网站时,Wodniack解释说,协作是关键:“随着网络变得越来越具有创造性,在开发人员和设计师之间组装创意二重奏变得至关重要,开发人员总是需要新的挑战,设计人员需要解决方案才能使其想法成为可能

04. 周期表

在演示开始时,不同的元素相互轻轻地飞翔

元素周期表是设计人员展示新的Web技术的受欢迎的主题。由巴塞罗那的网页设计师里卡多·卡贝洛(Ricardo Cabello)建立,在社区内最着名的是“ Doob先生 ” - 这个演示从动画元素开始,通过空间相互冲击形成一张桌子。

然后,您可以通过拖动鼠标在三维空间中进行旋转。您还可以通过单击页面底部的按钮在“Table”,“Sphere”,“Helix”和“Grid”视图之间进行切换。

Cabello创建了实验,看他是否可以使用他的three.js JavaScript库来复制游戏引擎famo.us 演示中使用的效果。Cabello还发布了这个视频演示如何在iPad 2上运行:

05. CSS生物

css生物你的CSS生物会是什么样子?

我们都知道,在设计行业工作有时会变得单调。所以,从忙碌的时间表中抽出一些时间,并从匹兹堡的网页设计师和开发人员Bennett Feely的这个可爱的小CSS项目中获得一些创造性的乐趣。

CSS生物允许用户设计,创建和动画他们自己的基于网络的朋友。喜欢那个声音吗?所有你需要做的是发送一个推特到@CSSCreatures与您喜欢的颜色,个性和功能。您的CSS生物然后在25秒内出现在网站上!

06. AT-AT步行者星球大战

AT3 Walker的CSS3动画AT-AT Walker by Anthony Calzadilla

这张由Anthony Calzadilla的“帝国叛逆之战”AT-AT Walker制作的动画完全由CSS3创建。点击iPad上的“查看骨骼”链接,您可以看到每个部分的动画和功能。

07. GT美国

设计师Josh Schaub的动画使这个微型网站生活

瑞士式铸造公司Grilli Type已经发布了新GT-America的新字体,这款“趣味,有趣,新鲜的微型网站将类型标本的想法提升到了一个新台阶”设计师和评论家Michael Bierut)。网站上的每一个细节都合在一起来讲述这个字体的故事。

GT-America以其灵感来源于美国而命名。这里有很多戏剧,设计师Josh Schaub有超过40种古怪的动画。你甚至可以与其中一些人交流,使插图生动。我们喜欢使用动画和视频来展示字体上的令人难以置信的多功能性:宽度,笔画,字距,使用。一切都是一个讲故事的时刻,一个教学时刻和一个学习的时刻。

08. Caaaaaaaat

猫延伸到浏览器窗口的宽度

日本网页设计师和互动导演Masayuki Kido(又名Roxik)创建了这个动画小工具,横跨浏览器窗口的长度,并相应调整大小,以减少窗口的宽度。使它足够狭窄,这个词随着热闹的后果而变化。而乐趣并没有结束,但是我们不想破坏它,所以现在就去玩吧!

09. 格林威治图书馆

该网站使用动画效果在用户滚动时创建绘图元素的幻觉

公共服务网站没有美丽或易于使用的良好记录,但格林威治图书馆的网站是规则的例外。重新设计是两年价值的研究,用户测试和设计的结果。

我们最喜欢的部分之一是用户滚动时绘制元素的错觉。这是许多开发人员使用SVG明确创建的一个技巧,但是在这里,CSS变换和分层元素的简单组合就像更复杂的SVG线条图一样有效。颜色编码的导航元素也增加了个性,而不必在每个元素上溅出颜色。

10. 互动专辑封面

CSS3动画相册封面专辑封面由bluedashed.com

不仅有@MrDenav和@lucasmarinm的bluedashed.com重建一些经典唱片介绍使用纯CSS,他们也取得了他们对音乐的反应。示范包括中风和喜悦部门的未知乐趣的第一印象。注意:仅适用于Google Chrome。