如何动态创建 “@-Keyframe” CSS 动画

在CSS中，@keyframes规则指定了一个元素在动画过程中应该经历的样式序列。在本文中，我们将学习如何使用这些序列在”@-keyframe“规则中创建动态动画。动态动画是指在用户交互或更改时对网页上的组件进行动画处理的能力。文本、图形和按钮都是可以用来创建视觉吸引力和交互性的组件示例。

然后，通过animation属性将这些样式应用于元素，这个属性设置了动画的持续时间、定时函数和其他属性。

语法

下面的示例中使用了以下语法−

<div></div>

该标签定义了HTML文档中的一个元素或区域。

@keyframe mymove {
}

@keyframes类物种元素的移动位置，例如顶部、底部、左侧、右侧。Keyframes是控制动态动画的更好技术。

属性

以下是示例中使用的属性-

text-align - 将h1元素定义为居中位置。
color - 定义h1元素的颜色。
width - 定义div元素的宽度。
height - 定义div元素的高度。
position - 定义绝对值显示固定值。
animation - 定义通过动态动画移动的值。
border-radius - 定义边角的半径。
background - 定义div元素的背景颜色。
opacity - 定义div元素的透明度。

示例1

在此示例中，我们将使用两个div元素通过使用border-radius属性创建一个圆形。要在圆上移动，将使用@keyframes动画设置CSS属性。这表示网页输出中的动态动画。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1{
         text-align: center;
         color: red;
      }
      div {
         width: 100px;
         height: 100px;
         position: absolute;
         animation: mymove 10s infinite;
         border-radius: 50px;
         background: grey;
         opacity: 0.8;
      }
      @keyframes mymove {
         10%   {top: 110px;}
         25%  {bottom: 200px;}
         75%  {right: 250px}
         100% {bottom: 300px;}
      }
   </style>
</head>
<body style="background: gold;">
   <h1>The Animation using @keyframe</h1>
   <div></div>
   <div><div>
</body>
</html>

示例2

在这个示例中，我们将创建一个 division 元素，用 div 元素选择器来定义它的属性，以设置单独的盒子。为了使 division 元素动态移动，它将使用动画和关键帧类的属性（用于设置移动位置）。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1{
         text-align: center;
         color: red;
      }
      div {
         width: 100px;
         height: 100px;
         position: absolute;
         animation: mymove 10s infinite;
         background: purple;
         opacity: 0.2;
      }
      @keyframes mymove {
         10%   {top: 110px;}
         50%  {bottom: 200px;}
         40%  {left: 50px;}
         30% { right:70px;}
      }
   </style>
</head>
<body style="background: powderblue;">
   <h1>The Animation using @keyframe</h1>
   <div></div>
</body>
</html>