html中怎样设置走动的时间

在HTML中，走动的时间可以通过CSS来设置。下面是一些实用的方法，可以让你自由控制元素的动态效果。

/** 用于指定一个动画序列的关键帧 */
@keyframes 名称 {
   from { ... }
   to { ... }
}

/* 示例 */
@keyframes move {
   from { margin-left: 0; }
   to { margin-left: 400px; }
}

上面的代码中，我们使用了 @keyframes来定义了一个名为 “move” 的动画。这个动画会将元素从左边的位置移动到距离左边 400 像素的位置。

接下来再来看一个更为复杂的例子，我们让一个元素在 3s 内从左往右移动，然后在 1s 时间内变成透明状态。

   /* 移动动画 */
   @keyframes move {
      0% { left: 0; }
      100% { left: 400px; }
   }
   
   /* 透明度动画 */
   @keyframes fade {
      0% { opacity: 1; }
      100% { opacity: 0; }
   }
   
   /*应用动画*/
   div {
      position: absolute;
      animation-name: move;
      animation-duration: 3s;
      animation-fill-mode: forwards;
   }
   
   div:hover {
      animation-name: fade;
      animation-duration: 1s;
      animation-fill-mode: forwards;
   }

在上述代码中，我们在 div 元素中应用了两个动画，一个是移动动画（move），一个是透明度动画（fade）。

我们在 div:hover 中重新定义了这个元素的状态，这将会同时影响之前应用的动画。当鼠标悬停在这个元素上时，它将会执行 fade 动画，用时 1s。

以上就是关于怎样设置 HTML 中元素的走动时间的介绍，希望对大家有所帮助！