为什么我的动画属性在 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>

大豆嘘这个词应该从左到右移动

Answer 1

嘿@Gan从 w3schools 阅读有关左属性的信息，它具有以下定义和用法

---

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);
  }
}