为什么我的动画属性在 CSS 中不起作用 [重复]

Question

我正在尝试使用 CSS 中的动画属性将 div 从左向右移动。但是代码不起作用。

我是 CSS 中动画属性的新手。我参考了 W3Schools 和 StackOverFlow 中的一些文章，但仍然没有成功。

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

<div id="title">Soy Boos</div>

Soy Boos 这个词应该从左向右移动

Answer 1

嘿@Gan 从 w3schools 中了解left property，它具有以下定义和用法

---

left 属性影响定位元素的水平位置。此属性对非定位元素没有影响。

• 如果位置：绝对；或位置：固定； - left 属性将元素的左边缘设置为其最近定位的祖先的左边缘左侧的一个单位。

• 如果位置：相对； - left 属性将元素的左边缘设置为其正常位置的左/右一个单位。

• 如果位置：粘性； - 当元素在视口内时，left 属性的行为就像它的位置是相对的，而当它在视口外时它的位置是固定的。

• 如果位置：静态； - left 属性无效。

---

因此，您只需将position 属性添加到您的#title 元素，left 属性即可工作...

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:relative; /* this one */
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

<div id="title">Soy Boos</div>

Answer 2

您需要将position:absolute 或position:relative 设置为#title

因为要工作left，您需要指定一个职位，如absolute 或relative

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:absolute;
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

<div id="title">Soy Boos</div>

Answer 3

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes move {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}