如何创建CSS关键帧动画

CSS使开发人员能够使用关键帧动画使网页栩栩如生。

CSS动画是通过更改HTML元素的各种属性的初始状态来实现的。可以动画化的一些常规CSS属性包括:

  • 宽度
  • 高度
  • 位置
  • 颜色
  • 不透明度

这些常规CSS属性由特定的CSS元素操纵以创建所需的结果。如果您在网页上遇到过动画元素,则很有可能是使用关键帧动画对该元素进行了动画处理。

什么是关键帧元素?

keyframes元素可以用在它有权访问的一个或多个HTML元素上。它标识元素状态中的特定点,并指示该元素此时必须具有的外观。

这听起来可能需要消化很多,但实际上非常简单。关键帧元素具有非常简单明了的结构,可以轻松理解和调整它以适合任何动画要求。

关键帧结构示例


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

假设您要通过将绿色矩形按钮变成蓝色圆形按钮来制作动画。

在上面的from部分的参数中,您将需要放置所有必要的样式,以使元素看起来像绿色的矩形按钮,然后在to部分中,您将放置所有样式要求,以将该按钮转换为蓝色的圆形按钮。 。

如果您在想,“听起来听起来不像动画那么多”。嗯,这是因为尚未引入整个过程的关键组成部分-该组件是animation属性。

动画属性

动画属性具有一组不同的子属性。这些与上面的关键帧结构结合使用,可以为所需的HTML元素设置动画。

但是,您只需要知道这些子属性中的五个及其关联的值,即可在项目中实现动画效果。这些属性称为:

  • 动画名称
  • 动画时间
  • 动画定时功能
  • 动画延迟
  • 动画迭代次数

在网页上使用动画

使用上述方案,目标是创建一个动画按钮。

按钮动画示例


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>

上面代码的动画部分包含前面提到的五个子属性。每个属性都有一个非常独特的功能,并且它们共同为所有使其成为目标的HTML元素设置动画。

相关:如何使用CSS选择器定位网页的一部分

动画名称属性

此属性是列表上单个最重要的属性。如果没有animation-name属性,您将没有标识符可以粘贴到keyframes元素,从而使其参数内的所有代码都变得无用。

如果您忘记包含一个或两个其他子属性,那么您可能仍会拥有相当不错的动画。但是,如果您忘记了animation-name属性,那么您将没有动画。

动画持续时间属性

此属性用于定义动画元素从一种状态转换到另一种状态时应花费的时间。

在上面的示例中, animation-duration属性设置为5秒(5秒),因此绿色矩形按钮在完全变为蓝色圆形按钮之前总共需要5秒钟。

动画延迟属性

由于一个原因,此属性很重要。某些网页可能要花几秒钟才能完全加载(由于几个不同的因素)。因此, animation-delay属性可防止动画立即启动,以防万一网页需要花费一些时间来加载。

在上面的示例中, animation-delay属性设置为4s,这意味着动画将在访问网页后4秒钟后才开始(给网页足够的时间在动画开始之前加载)。

动画迭代次数属性

此属性说明动画元素应从一种状态转换到另一种状态的次数。 animation-iteration-count属性采用的值是单词和数字。数字值可以是从1到1的任何值,而单词值通常是“ infinite ”。

在上面的示例中, animation-iteration-count值设置为“ infinite ”,这意味着只要网页处于启动状态,button属性就会从一种状态连续地变为另一种状态。

动画定时功能属性

此属性指示动画元素从一种状态转换到另一种状态时的运动。通常为animation-timing-function属性分配三个缓动值之一。

  • 缓入
  • 缓出
  • 缓入缓出

上面使用了缓入值;这将使动画从一种状态缓慢过渡到另一种状态。如果目标是在按钮从绿色矩形转换为蓝色圆形时创建缓慢的过渡,则可以使用easy-in值。如果您只想在相反的方向上缓慢过渡,则可以使用ease-out值

减少我们的代码

在大多数情况下,减少程序的长度被视为一种实用的方法。这主要是因为更少的代码行减少了程序中错误被忽略的可能性。

上面的代码可以减少四行。这可以通过简单地使用animation属性而无需显式标识其每个子属性来实现。

减少按钮动画示例的代码


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>

在上面的代码中,使用一行代码来达到与以前使用五行代码相同的结果-这就是生成更干净的代码的方式

现在您可以对网页进行动画处理

现在,您已经具备了对网页上的任何HTML元素进行动画处理所需的技能。您还应该了解animation属性和关键帧元素如何协同工作以使CSS动画成为可能。

动画属性及其广泛的子属性列表无疑是很有趣的。不过,您可能会发现还有许多其他CSS属性可能有用。

图片来源:Josh Riemer / Unsplash