如何动态创建"@-Keyframe"CSS 动画?

cssweb developmentfront end technology更新于 2024/7/25 0:44:17

在 CSS 中，@keyframes 规则指定了元素在动画过程中应经历的一系列样式。本文将学习如何使用"@-keyframe"规则中的这些样式序列创建动态动画。在 CSS 中，根据用户交互或更改对网页上的组件进行动画处理的能力被称为动态动画。文本、图形和按钮都是可用于创建视觉吸引力和引人入胜的用户体验的组件示例。

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

@-keyframe 动画的可视化表示

语法

示例中使用了以下语法 -

<div></div>

该标签定义 HTML 文档中的元素或分区。

@keyframe mymove {
}

@keyframe 类指定元素的移动位置，即顶部、底部、左侧、右侧。关键帧是控制动态动画的更佳技术。

属性

示例中使用的属性如下:-

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

示例 1

在此示例中，我们将使用二分元素，通过 border-radius 属性创建一个圆形。要在圆形上移动，需要使用 @keyframe 动画设置 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 元素实现动态移动，我们将使用 animation 属性和 keyframe 类(用于设置移动位置)。

<!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>