19个很酷的CSS动画示例重新创建

你可能已经注意到了很多CSS动画示例最近出现在网站和应用程序中。动画已经成为一段时间的主流趋势,并且没有显示出任何地方的迹象。

虽然它在动画方面似乎有限,但CSS实际上是一个非常强大的工具,能够生成非常流畅的60fps动画。在整个网络上,设计师都在发挥创意,使用CSS动画为他们的网站带来个性,轻松捕捉复杂的想法,巧妙地指导用户的行为。

这里的黄金法则是你的CSS动画不应该被夸大 - 即使是一个小动作也会产生很大的影响,太多可能会让用户分心和烦恼。您在网上看到的最佳动画仍然源于迪士尼的经典之作12动画原理

在本文中,我们将来自世界各地的最佳CSS动画示例集合在一起,并深入研究代码,向您展示如何自己实现这些效果。继续阅读深入的教程和鼓舞人心的效果(及其代码链接),以便您自己探索,或者跳到第3页有关何时以及如何使用CSS动画的一些重要提示。

什么是CSS动画?

CSS动画是一种动画某些HTML元素的方法,无需使用处理器和内存饥渴的JavaScript或Flash。可以更改的CSS属性的数量或频率没有限制。通过为动画指定关键帧来启动CSS动画:这些关键帧包含元素将具有的样式。

01.吹泡泡

在7UP上提供的CSS泡泡动画是将品牌主题融入网站设计的一个很好的例子。动画由几个元素组成:气泡的SVG'绘图',然后应用于每个气泡的两个动画。

第一个动画改变了气泡的不透明度,并在视图框中垂直移动;第二个创造了摇摆效果,增加了真实感。通过定位每个气泡并应用不同的动画持续时间和延迟来处理偏移。

为了创造我们的泡泡,我们将使用SVG。在我们的SVG中,我们创建了两层气泡:一层用于较大的气泡,另一层用于较小的气泡。在SVG内部,我们将所有气泡放在视图框的底部。

 ...  ... 

为了将两个单独的动画应用于我们的SVG,两者都利用了transform属性,我们需要将动画应用于单独的元素。该SVG中的元素可以像HTML中的div一样使用;我们需要将每个气泡(已经在一个组中)包装在一个组标签中。

    

CSS有一个强大的动画引擎和非常简单的代码,以生成复杂的动画。我们首先将屏幕上的气泡移动并改变它们的不透明度,以便在动画的开始和结束时将它们淡入淡出。

@keyframes up {0%{opacity:0; } 10%,90%{不透明度:1; } 100%{不透明度:0; transform:translateY(-1024px); }}

为了创造一个摆动效果,我们只需要向右和向右移动(或平移)气泡,过多会导致动画看起来过于苛刻和断开,而太少则会被忽视。在使用动画时,实验是关键。

@keyframes wobble {33%{transform:translateX(-50px); } 66%{transform:translateX(50px); }}

为了将动画应用到我们的气泡中,我们将使用我们之前使用的组和帮助第n-的型单独识别每个泡沫组。我们首先将不透明度值应用于气泡和将改变属性以利用硬件加速。

.bubbles-large> g {不透明度:0; will-change:transform,opacity;} .bubbles-large g:nth-of-type(1){...} .... .bubbles-small g:nth-of-type(10){...}

我们希望在几秒钟内保持所有动画时间和延迟,并将它们设置为无限重复。最后,我们申请易于进出定时功能,我们的摆动动画,使它看起来更自然。

.bubbles-large g:nth-of-type(1){animation:up 6.5s infinite; } .bubbles-large g:nth-of-type(1)circle {animation:wobble 3s infinite wide-in-out; } ... bubbles-small g:nth-of-type(9)circle {animation:wobble 3s 275ms无限轻松进出; } .bubbles-small g:nth-of-type(10){animation:up 6s 900ms infinite;}

02.滚动鼠标

微妙的滚动鼠标动画可以在用户首次登陆网站时为其提供指导。虽然这可以使用HTML元素和属性来完成,但我们将使用SVG,因为它更适合绘图。

在我们的SVG内部,我们需要一个带圆角的矩形和一个圆圈,用于我们要制作的元素,通过使用SVG,我们可以将图标缩放到我们需要的任何大小。

     

现在我们已经创建了SVG,我们需要应用一些简单的样式来控制容器中图标的大小和位置。我们在鼠标SVG周围包裹了一个链接,并将其定位在屏幕的底部。

.scroll-link {position:absolute;底部:1rem;左:50%; transform:translateX(-50%); } .mouse {max-width:2.5rem;宽度:100%;身高:自动; }

接下来我们将创建我们的动画。通过动画的0%和20%,我们希望在元素开始时设置元素的状态。通过将其设置为通过的20%,它将在无限重复的部分时间内保持静止。

@keyframes滚动{0%,20%{transform:translateY(0)scaleY(1); }}

我们需要添加不透明度起点,然后将Y位置和垂直刻度变换为100%标记,即动画结束。我们需要做的最后一件事是降低不透明度以淡出我们的圆圈。

@keyframes scroll {... 10%{opacity:1; } 100%{transform:translateY(36px)scaleY(2);不透明度:0.01; }}

最后,我们将动画应用于圆圈,以及'transform-origin'属性和将改变属性允许硬件加速。动画属性相当不言自明。该立方贝塞尔定时功能用于先将圆圈拉回,然后将其放回鼠标形状的底部;这为动画增添了俏皮感。

.scroll {animation-name:scroll;动画持续时间:1.5s; animation-timing-function:cubic-bezier(0.650,-0.550,0.250,1.500); animation-iteration-count:无限; transform-origin:50%20.5px;将改变:转变; }

03.动画写作

CSS animations: writing

单击以查看动画

Garden Eight网站使用一种通用的动画技术,文字似乎被写出来。为了达到这个效果,我们转向SVG。首先,我们将创建SVG。这里有两种方法:将文本转换为路径以便为它们设置动画或使用SVG文本。两种方法都有其优点和缺点。

首先创建我们的关键帧动画。我们需要它执行的唯一功能是更改中风dashoffset。现在我们已经创建了动画,我们需要应用我们想要动画的值。我们设定了中风dasharray,这将在中风中产生差距。我们希望将笔划设置为足够大的值以覆盖整个元素,最后将笔划偏移笔划的长度。

当我们应用动画时会发生魔力。通过设置偏移动画,我们将笔划置于视图中 - 创建绘图效果。我们希望元素一次绘制一个,在绘制一个元素的末尾和开始绘制下一个元素之间有一些重叠。为实现这一目标,我们转向萨斯/ SCSS和第n-的型将每个字母延迟动画长度的一半,再乘以该特定字母的位置。

04.飞鸟

我们从完全直线的矢量线开始,绘制动画的每一帧,描绘处于不同飞行状态的鸟。然后,我们操纵矢量点并围绕线条和边缘。最后,我们将每个框架放入一个大小相同的盒子中并将它们并排放置。将文件导出为SVG。

HTML设置非常简单。我们只需要将每只鸟包裹在容器中以便应用多个动画 - 一个用于使鸟飞,另一个用于将其移动到屏幕上。

我们将鸟SVG作为我们鸟类div的背景应用,并选择我们想要每个帧的大小。我们使用宽度来粗略计算新的背景位置。 SVG有10个单元格,因此我们将宽度乘以10然后稍微改变数字直到看起来正确。

.bird {background-image:url('bird.svg'); background-size:auto 100%;宽度:88px;身高:125px;将改变:背景位置; } @keyframes fly-cycle {100%{background-position:-900px 0; }}

CSS动画有一些你可能不知道的技巧。我们可以使用动画定时功能按步骤显示图像 - 就像翻阅笔记本中的页面以暗示动画一样。

动画名称:飞行循环;动画定时功能:步骤(10); animation-iteration-count:无限;动画持续时间:1s;动画延迟:-0.5s;

现在我们已经创造了我们的飞行循环,我们的鸟目前正在扇动她的翅膀,但不会去任何地方。为了让她在屏幕上移动,我们创建了另一个关键帧动画。此动画将水平移动屏幕上的鸟,同时也改变垂直位置和比例,以使鸟更逼真地蜿蜒。

一旦我们创建了动画,我们只需要应用它们。我们可以创建我们的鸟的多个副本并应用不同的动画时间和延迟。

.bird  - 一个{动画持续时间:1s;动画延迟:-0.5s; } .bird  - 两个{动画持续时间:0.9秒;动画延迟:-0.75s; }

05.越过我的汉堡包

此动画在整个网络上使用,将三条线转换为十字形或关闭图标。直到最近,大多数实现都是使用HTML元素实现的,但实际上SVG更适合这种动画 - 不再需要使用多个跨度来膨胀按钮代码。

由于动画特性和SVG及其可导航的DOM,完成动画或转换的代码变化很小 - 技术是相同的。

我们首先创建四个元素,无论是跨越div内部还是SVG内部的路径。如果我们使用跨度,我们需要使用CSS将它们放在div中;如果我们使用SVG,这已经得到了解决。我们希望将第2和第3行放在中心 - 一个放在另一个上面 - 同时将第1和第4行均匀地分隔在上方和下方,确保将变换原点居中。

我们将依赖于转换两个属性:不透明度和旋转度。首先,我们希望淡出第1行和第4行,我们可以使用它来定位:第n个孩子选择。

.menu-icon.is-active {element-type}:nth-child(1),. menu-icon.is-active {element-type}:nth-child(4){opacity:0; }

剩下要做的唯一事情就是瞄准两条中间线并将它们向相反方向旋转45度。

.menu-icon.is-active {element-type}:nth-child(2){transform:rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3){transform:rotate(-45deg); }

06.追逐圈子

动画加载图标由四个圆圈组成。圆圈没有填充,但具有交替的笔触颜色。

     

在我们的CSS中,我们可以为所有圈子设置一些基本属性,然后使用:第n型-选择器应用不同的中风dasharray每个圈子。

circle:nth-of-type(1){stroke-dasharray:550; } circle:nth-of-type(2){stroke-dasharray:500; } circle:nth-of-type(3){stroke-dasharray:450;} circle:nth-of-type(4){stroke-dasharray:300; }

接下来,我们需要创建关键帧动画。我们的动画非常简单:我们需要做的就是将圆圈旋转360度。通过将我们的变换置于动画的50%标记处,圆圈也将旋转回原始位置。

@keyframes preloader {50%{transform:rotate(360deg); }}

创建动画后,我们现在只需要将它应用到我们的圈子中。我们设置动画名称;持续时间;迭代计数和计时功能。 “轻松进出”将让动画更有趣。

动画名称:预加载器;动画持续时间:3s; Animation-iteration-count:无限;动画定时功能:轻松进出;

目前,我们有装载机,但所有元素都在同时旋转。要解决此问题,我们会应用一些延迟。我们将使用Sass For循环创建延迟。

@for $ i从1到4 {&:nth-of-type(#{$ i}){animation-delay:#{$ i * 0.15} s; }}

由于延迟,我们的圈子现在依次动画,创造了相互追逐的圈子的幻觉。唯一的问题是,当页面首次加载时,圆圈是静态的,然后它们开始一次一个地移动。我们可以实现相同的偏移效果,但只需将延迟设置为负值即可停止动画中不必要的暂停。

动画延迟: - #{$ I * 0.15} S;

07.复古可点击手风琴

比利时界面设计师和CSS骗子Benjamin de Cock向我们展示了如何使用CSS3的强大功能来创建一个动画,自动居中的可点击手风琴。

我将为这款手风琴使用一些简单的HTML5代码。基本上,手风琴的每个部分都是一个部分元素(有意义不是吗?)并包含一个标题和一个段落。

介绍

Lorem ipsum dolor坐着......

一般信息

Lorem ipsum dolor坐着......

联系我们

Lorem ipsum dolor坐着......

我们的想法是将章节标题包含在链接到自己的锚点中。因为:target让我们选择目标元素,我们也可以使用相邻的兄弟选择器选择跟随它的元素。我们试试吧。这是修改后的HTML标记:

介绍

Lorem ipsum dolor坐着......

一般信息

Lorem ipsum dolor坐着......

联系我们

Lorem ipsum dolor坐着......

这里有非常简单的CSS来获得第一个切换行为:

p {display:none; }:target + p {display:block; }

我将首先将手风琴水平和垂直对中。 Flexbox模型是这种效果的完美定位方法,因为它允许我们总是在块的中心(这里是页面)显示元素而不指定任何维度。我将使用本教程的标准符号,但不要忘记在最终代码中使用供应商前缀。

* {保证金:0;填充:0; } html,body {身高:100%; } body {display:box;箱型定向:垂直;盒包装:中心;箱对齐:中心; / *对于Firefox * /宽度:100%; } div {width:250px; }

居中,但视觉上仍然非常糟糕。添加更多CSS性感:

body {font:.7em / 1.5“lucida grande”,arial,sans-serif;背景:#f3faff; } div {background:#fff;边界半径:5像素; box-shadow:0 1px 3px rgba(0,0,0,.3); } h1 {font-size:1em;一个{display:block; family:宋体;行高:23像素; background:线性渐变(#eee,#ccc);颜色:#333;文字修饰:无;文本对齐:中心; text-shadow:0 1px 0 rgba(255,255,255,.5); border-bottom:1px solid #aaa; } #intro {border-radius:2px 2px 0 0; } #contact {border-radius:0 0 3px 3px; } a:hover,a:focus {opacity:.9; } a:active {background:linear-gradient(#ccc,#ddd);颜色:#000; }

活泉!它现在看起来既实用又性感。关于我的要求,我几乎就在那里。实际上只是错过了动画部分。坏消息:添加这些转换并不容易。

主要问题是您显然无法对显示等属性执行转换,因此您必须使用数值。因此,我将使用height属性从0切换到内容高度,而不是隐藏和显示带有显示的部分。

第二个坏消息:您目前无法在数值和“自动”之间执行转换。这意味着我必须手动为每个部分指定高度。据我所知,这是W3C所知道的,他们同意它应该是可能的。我希望浏览器厂商能够实现这一点:它会非常有用。这是最终的代码:

* {保证金:0;填充:0; } html,body {身高:100%; } body {display:box;箱型定向:垂直;盒包装:中心;箱对齐:中心;字体:.7em / 1.5“lucida grande”,arial,sans-serif;背景:#f3faff; / *对于Firefox * /宽度:100%; } div {width:250px;背景:#FFF;边界半径:5像素; box-shadow:0 1px 3px rgba(0,0,0,.3); } p {height:0;填充:0 15px;溢出:隐藏;过渡:高度.4s缓和,填充.4s缓和; } h1 {font-size:1em;一个{display:block; family:宋体;行高:23像素; background:线性渐变(#eee,#ccc);颜色:#333;文字修饰:无;文本对齐:中心; text-shadow:0 1px 0 rgba(255,255,255,.5); border-bottom:1px solid #aaa; } #intro {border-radius:2px 2px 0 0; } #contact {border-radius:0 0 3px 3px; } a:hover,a:focus {opacity:.9; } a:active {background:linear-gradient(#ccc,#ddd);颜色:#000; }:target + p {padding:10px 15px; border-bottom:1px solid #ccc; } #intro:target + p {height:70px; } #info:target + p {height:230px; } #contact:target {border-radius:0; } #contact:target + p {height:180px; }

下一页:更多要探索的CSS动画示例



翻译字数超限