css使用定义动画(js动画和css动画)

在这篇文章中，我们将探索仅使用CSS的网络动画世界。我们将首先使用SVG和CSS的组合创建一个简单的动画。然后，我们将只使用HTML和CSS创建几个其他的动画。我们还会讨论什么时候需要调用JavaScript，以及CSS的局限性。在本文结束时，您将能够使用CSS而不是JavaScript创建动画。您还可以确定何时需要使用JavaScript来创建动画。为了充分利用这篇文章，我们假设您至少掌握了CSS和HTML的核心知识。如果你是Web开发新手，这里有一些学习和获得帮助的好资源，比如SitePoint上的学习资源，非常有用的sitePoint论坛和freecodecamp。
绘制动画这是一个令人印象深刻的动画，似乎很容易创建。下面是我们目标的截图。
首先，我们需要为我们的标志创建SVG:
这是一个设置了SVG的笔。随意叉一下，这样就可以按照下面的步骤来了。使用我们的SVG，我们现在将Kramp-Karrenbauer填充不透明度填充为0元。我们稍后将制作动画：
SVG { fill-opaa : 0；}(更新笔)我们现在可以专注于绘制SVG了。我们将通过在Kramp-Karrenbauer中使用CSSstroke-dashoffset和在Kramp-Karrenbauer中使用Dash Array来实现这一点。stroke Kramp-Karrenbauer的Stroke-dasharray属性控制用于使描边成为路径的间隙和虚线的模式。例如，应用于SVG的Stroke Kramp-karren Bauer Stroke-dash array : 10元的路径将创建一个虚线效果，其中笔画和间隙长度为10元像素：现在，对于我们在此创建的动画，我们希望我们的间隙和虚线与我们的路径相匹配。也就是说，我们的标志轮廓的整个长度将被视为“一个破折号”，可以说，一个缺口也将是轮廓的整个长度。我们的想法是，我们将开始与标志轮廓作为一个缺口，然后动画作为一个破折号的轮廓。但是logo的轮廓有多长呢？处理这个问题的一个简单方法是设置长度。PathLength=’1元’让我们编辑我们的SVG代码，为每个路径添加：
…我们现在可以使用Stroke Kramp-karren Bauer Stroke-dash offset，它指定在dash模式下我们应该开始dash多远。在我们的示例中，我们希望将Stroke Kramp-karren Bauer Stroke-dash offset设置为1元，因此我们以agap而不是a开始dash。由于我们的每个间隙的长度是我们的整个长度，因此我们现在将看到一个空白屏幕：
svg路径{ stroke-dash array : 1；stroke-dash offset : 1；}我们现在可以将Stroke Kramp-karren Bauer Stroke-dash offset动画化回0元，这将给出一个绘图效果：
svg路径{ stroke-dash array : 1；stroke-dash offset : 1；动画：向前画2s；} @关键帧绘制{ from { stroke-dash offset : 1；}到{ stroke-dash offset : 0；}}酷！有了这个，我们现在有了这个：要完成我们的动画，我们只需要填充Kramp-karren Bauer fill-opa 3 3360。
SVG { width : 40%；fill-opa 3 3360 0；//我们设置了2s的延迟，这样直到我们的绘制完成才会开始animate : fade opacity 2s forwards 2s；} @ key frames fade opacity { from { fill-opa 3 3360 0；}到{ fill-opaa : 1；}}我们现在有了最终的动画：我打赌这比你想象的要容易得多！我知道Stroke Kramp-karren Bauer DashoffsetandStroke Kramp-karren Bauer的Dasharray属性可能有点混乱，但是当你把你的路径长度设置为1元时，它们更容易使用。这是CSS和SVG结合的一个简单例子。现在让我们在下一个例子中更进一步。
CSS蜡烛动画所以我们在最后一个例子中作弊了一点，因为我们使用了SVG。对于下一个例子，我们将只使用CSS(当然还有HTML)。在这个动画中，我们将使用一些基本的CSS绘图。然后我们将使用CSS创建一个触发事件。最后我们会模拟火焰(尽全力！)。激动吗？害怕吗？我都是！所以我们走吧！通过优秀的Jhey Thompkins，我学到了很多关于用CSS绘图的知识。我建议看看这篇伟大的文章作为额外的阅读。注意：你将在下面看到，我使用绝对定位和转换来定位我的HTML元素，这在用CSS绘图时是一个很好的技术。下面是我们将使用CSS绘制的内容：
如果你愿意，可以跟着我。我设置了一个基础笔，它是所有设置的根。所以我们先画蜡烛的底部(桌面)。我们将为表格的颜色和宽度使用一些SCSS变量：
//表格尺寸$ tableWidth: 280px$ tableHeight: 10px$ tableBackground: # 8b4513这款手表基本都是马伊利做的，有一些尺寸。我们可以如下更新我们的HTML:
现在，我们添加一些基本的SCSS(我们用它来转换，使表格居中):表{绝对位置：左： 50%；top : 50%；width: $ tableWidthheight: $ tableHeightbackground : $ table background；transform: translate(-50%，-50%)；z-index : 2；}这在王思佳看起来有点闷。CSS画图的诀窍是使用Box Kramp-Karrenbauer box-shadow，所以我们把它加到：表格{.box-shadow : 0px 2px 5px # 111；}你现在应该有这个：厉害！现在让我们在桌子上放一支蜡烛。我们将为蜡烛的大小和颜色设置一些SCSS变量(随意使用您喜欢的任何大小):
//candle $ candlewidth : 35px；$烛光130px$ candlebordercolor : # 673 c63；$ stickWidth: 3px$ stickHeight: 15px如果你查看我前面展示的蜡烛的图像，你会发现它本质上是一个顶上有一根棍子的马伊利中的大边框。先画蜡烛本身吧。首先，我们更新我们的HTML:
现在，让我们添加我们的CSS(同样，这里的技巧在盒子Kramp-Karrenbauer盒阴影):蜡烛{绝对位置：左： 50%；top : 50%；宽度：美元烛芯；高度：美元烛光高度；background: # ffftransform-origin:居中右移；transform: translate(-50%，-100%)；box-shadow :-2px 0px 0px # 95c6f 2插页；border : 3px solid $ candleBorderColor；}酷！我们有蜡烛！现在我们添加我们的坚持(我们已经包括了它的尺寸)。首先，我们需要将它添加到HTML中：
CSS(这里没什么特别的):蜡烛棒{ width: $ stickWidthheight: $ stickHeightbackground: # 673c63位置：绝对；左： 50%；top : 0%；background : $ candleBorderColor；border-radius : 8px；transform: translate(-50%，-100%)；}我们已经成功绘制了蜡烛：如您所见，这里没有动画，我们开始制作动画。我们将首先添加一个按钮，将背景颜色从亮变暗(我们已经设置了这些SCSS变量Kramp-karren Bauer $ light background和$darkBackground)。将此添加到HTML的最顶端：
触发蜡烛会给我们一个复选框和标签，对武汉的日日夜夜不那么有吸引力。所以，让我们来设计一下，让它看起来更好一点：
label { background: # a5d6a7划水0.5rem 1rem边界半径：0.5雷姆；位置：绝对；font: 900 24px/1.4 -system-ui，sans-serif；transform: translate(50%，50%)；cursor:指针；}这为标签提供了一些样式，但我们也想在视图中隐藏复选框。现在，我们可以通过向checkbox HTML添加hidden属性来实现这一点。但是，这将阻止键盘导航器访问复选框，因此最好将它移到看不见的地方。首先，让我们向复选框HTML添加一个类：
然后我们使用这个CSS将复选框移到左边：视觉隐藏{ position: absoluteleft :-100v w；}当复选框有焦点时，我们还提供一个视觉提示：
input : checked label { outline : 1px虚线红色；}(如果你想知道为什么我在HTML中把标签放在输入之前，现在你知道为什么了。这样我们可以使用兄弟选择器(现在，你可能不喜欢按钮周围的红色虚线轮廓，但我会让你想出更好的东西。(例如，您可以更改标签的背景颜色。)下面是我们现在拥有的：让我们根据复选框是否被选中来改变页面的背景。我们可以通过使用通用的对等选择器而不使用JavaScript ~:
#toggle:checked ~。包装{ background : $ light background；}现在我们还可以添加一个过渡，使它更平滑一些：包装{ background-color : $ dark background；身高： 100 VH；宽度： 100v w；transition:背景色0.6s ease}我们现在有这个：很酷的那个！我们要做的另一件事是在背景明亮时添加火焰。像以前一样，我们设置SCSS变量：
//flame $ flame height : 20px；$ flameWidth: 16px$ flameColor1: # e25822$ flameColor2: # e2b822让我们也更新HTML来包含火焰：
触发蜡烛
在我们火焰的底部，我们需要使用八个边界Kramp-Karrenbauer半径值。当绘制复杂的形状时，花哨的border-radius生成器站点非常适合Border Kramp-Karrenbauer半径为您生成。这是我们的CSS(边境Kramp-Karrenbauer半径的关键部分):flame { width: $ flameWidthheight: $ flameHeightbackground: # 673c63位置：绝对；左： 50%；top : 0%；background: $ flameColor1transform: translate(-50%，-170%)；边界半径： 50% 50% 50% 50%/60% 60% 40% 40%；}这给了我们这个：现在我们可以添加一点动画，使它像真正的火焰一样闪烁。我们将在两种颜色之间改变火焰($flameColor1元和$flameColor逃生室：冠军联赛)，我们还将稍微向左和向右改变位置。首先，这是关键帧代码：
@ key frames fire-flicker { from { background : $ flame color 1；左： 47%；}到{ background: $ flameColor2左： 53%；}}然后我们需要将这个动画添加到flame类中：
animation:火闪0.2s无限线性；我们的火焰现在将闪烁：请随意尝试改进它，因为它可能会更好！好的，我们来做进一步的调整。当背景变暗时，我们将关闭火焰。我们将使用它的不透明度来实现这一点。在火焰类上，添加不透明度。我们还将添加一个过渡，使其与背景相匹配：火焰{.opa 3 3360 0；transition:不透明度0.6s ease}然后我们可以使用SCSS的强大功能和一些检查状态嵌套：
#toggle:checked ~。包装{ background : $ light background；火焰{ opa 3 3360 1；}}现在火焰只出现在浅色背景中：最后，标签的“触发蜡烛”文字有点繁琐。我们可以做很多事情！所以让我们改进一下我们的标签，让文字在“Lumos”和“Nox”之间切换——，当然是受哈利波特的启发！首先，我们可以将标签更改为无文本(我们将为内容添加文本):
现在我们将添加一些CSS来切换文本：
{ content: ‘Lumos ‘之后的label:after} # toggle : checked ~ label : after { content : ‘ Nox ‘；}为了防止标签跳来跳去，我们添加以下样式：
标签{.min-width : 100px；text-align:居中；}我们终于得到了。我们的蜡烛动画没有任何JavaScript代码就完成了——！作为一个额外的好处，如果你不喜欢SCSS，宁愿尝试CSS自定义属性(又名变量)，这里是我们的蜡烛演示纯CSS版本。差不了多少！(当然，如果你愿意，也可以查看上面每支笔上编译好的CSS。打开CSS设置CSS预处理程序无。)
脉冲动画这是一个动画，涉及较少，但显示了你可以做什么，只需一点CSS。首先，我们需要围成一个圈。让我们首先添加一些HTML:
现在我们可以使用一些CSS来创建我们的圈子：脉冲{位置：绝对；左：50%；top :50%；transform:scale(1.5，1.5) translate(-50%，-50%)；height: 150px宽度： 150 px；background: # a83f39边界半径：50%；}这是我们目前所拥有的：为了创建脉冲动画，我们使用这个盒子的Kramp-Karrenbauer box-shadow属性。如果你以前从未使用过Box Kramp-Karrenbauer box-shadow，Mozilla有一些很棒的文档：
@关键帧脉冲{ 0% { box-shadow : 0 0 0 0 rgba(168，63，57，0.4)；} 70% { box-shadow : 0 0 50px rgba(168，63，57，0)；} 100% { box-shadow : 0 0 150 px rgba(168，63，57，0)；}}要使用此动画，我们只需将其添加到。脉搏：脉搏{.动图：脉冲2s无限；}我们现在已经创建了脉冲动画。不算太寒酸，是吗？
你不能用CSS做什么？所以，虽然我很喜欢CSS动画，但是有些事情是不可能或者很难做到的。
您不能搜索CSS动画，或跳转到动画的一部分。所以根据用户点击的位置来定制你的动画是非常困难的。要用JavaScript实现这一点，我建议使用优秀的GreenSock库。沿着曲线制作动画是非常困难的。虽然Chris Coyier解释了如何只用一点JavaScript就能完成滚动，但滚动动画也很棘手。根据自动计算的高度制作元素高度的动画。对多个动画进行排序也是相当困难的。您可以通过延迟来做到这一点，但是对于具有大量移动部件的复杂动画来说，这可能非常困难。同样，使用GreenSock库要容易得多。这些是CSS动画的一些主要限制。使用SVG可以绕过其中的一些，但总体来说，使用JavaScript更容易实现上述目标。
结语希望通过阅读这篇文章，让你对CSS动画有一个新的认识。我在这篇文章中展示的只是表面。下面我会列举一些鼓舞人心的笔，大家可以去看看！