跳到主要内容

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

CSS animation: Game of the Year homepage

+$You've probably noticed that a lot ofCSS+$animation examples have been popping up on websites and in apps lately. Animation is has been a major trend for some time now, and is showing no signs of going anywhere, as can be seen from these awesome动画音乐视频

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

+$The golden rule is that your CSS animations shouldn't be overblown – even a small movement can have a big impact, and too much can be distracting and irritating for users. The best animations you see online still have their roots in Disney's classic12动画原理

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

+$What is CC animation?

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

+$01. Tumbling Lettering

CSS animation: tumbling lettering

+$Google's Game of the Year features a playful CSS animation on the homepage, with the title words tumbling and bumping into one another. Here's how it was done.

+$The first step is to define the webpage document with HTML. It consists of the HTML document container, which stores a head and body section. While the head section is used to load the external CSS and JavaScript resources, the body is used to store the page content.

+$   Off Kilter Text Animation     

The Animated Title

The Animated Title

The Animated Title

+$The page content consists of three h1 title tags that will show the different variations of the animation effect. While any text can be inserted into these tags, their animation is defined by the names in the class attribute. The presentation and animation settings for these class names will be defined in the CSS later on.

+$Next, create a new file called 'Code.js+$'. We want to find all page elements with the+$animate+$class and create an排列+$list representing each word of the inner text. The initial animation delay is also defined in this step. Page content is not available until the page has fully loaded, so this code is being placed inside the window’s加载+$event Listener.

+$The word content of the animation items needs to be contained inside a跨度+$element. To do this, the existing HTML content is reset to blank, then a loop is used to make the word in the identified 'words' list a span element. Additionally, an+$animationDelay+$style is applied – calculated in relation to the initial delay (specified below) and the word’s index position.

+$window.addEventListener("load", function(){ var delay = 2; var nodes = document.querySelectorAll (".animate"); for(var i=0; i

创建一个名为的新文件Styles.css的+$. Now we'll set the presentation rules that will be part of every word element in the animation, controlled by their span tag. Display as block, combined with centred text alignment, will result in each word appearing on a separate line horizontally aligned to the middle of its container. Relative positioning will be used to animate in relation to its+$text-flow+$position.

+$.animate span{ display: block; position: relative; text-align: center; }

+$Animation elements that have the backwards and forwards class have a specific animation applied to them. This step defines the animation to apply to span elements whose parent container has both the+$animate+$backwards要么前锋类。

+$Note how there is no space between the+$animate+$backwards+$class reference, meaning the parent element must have both.

+$.animate.backwards > span{ animation: animateBackwards 1s ease-in-out forwards; } .animate.forwards > span{ animation: animateForwards 1s ease-in-out forwards; }

+$The mixed animation is defined using the same settings used for the forwards and backwards animations. Instead of applying the animations to every child of the parent, the第n个孩子+$selector is used to apply alternating animation settings. The backwards animation is applied to every甚至+$-number child, while the forwards animation is applied to every+$-number Child.

+$.animate.mixed > span:nth-child(even){ animation: animateBackwards 1s ease-in-out forwards; } .animate.mixed > span:nth-child(odd){ animation: animateForwards 1s ease-in-out forwards; }

+$The animations we've just created are made with an initial '+$' starting position, with no vertical position or rotation adjustment. The '+$' position is the final state of the animation, which sets the elements with an adjusted vertical position and rotation state. Slightly different ending settings are used for both animations to avoid the text becoming unreadable due to overlap in mixed animations.

+$@keyframes animateForwards { from { top: 0; transform: rotate(0deg); } to { top: .9em; transform: rotate(-15deg); } } @keyframes animateBackwards { from { top: 0; transform: rotate(0deg); } to { top: 1em; transform: rotate(25deg); } }

+$02. Blowing Bubbles

在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;}

+$03. Scrolling Mouse

微妙的滚动鼠标动画可以在用户首次登陆网站时为其提供指导。虽然这可以使用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;将改变:转变; }

+$04. Animated Writing

CSS animations: writing

单击以查看动画

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

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

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

+$05. Flying Birds

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

+$06. Cross My Hamburger

此动画在整个网络上使用,将三条线转换为十字形或关闭图标。直到最近,大多数实现都是使用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); }

+$07. Chasing Circles

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

     

在我们的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;

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



翻译字数超限