Question

所以我试图让#txtName课程动起来，并且它正常工作。我的问题是.smallletters在<span>内设置为<h1>属性，我无法像在#txtName做的那样开始在页面外设置动画。这意味着当我刷新时，我已经看到.smallletters，然后#txtName即将到来并推动.smallletters。

＆＃13;

#txtName {
  font-size: 80px;
  color: #ff6666;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  top: 300px;
  animation-name: First;
  animation-duration: 4s;
}

@keyframes First {
  0% {
    top: 10px;
  }
  50% {
    top: 400px;
  }
  100% {
    top: 300px;
  }
}

.smallletters {
  font-size: 40px;
  letter-spacing: 0.5em;
  display: inline;
  animation-name: second;
  animation-duration: 4s;
}

@keyframes Second {
  0% {
    top: 0px;
  }
  100% {
    top: 300px;
  }
}

＆＃13;

<header id="main-header">
  <h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

＆＃13;

Answer 1

您只能动画top个定位元素，以便定位smallletters。你的动画也是Second（注意大写s）

＆＃13;

#txtName {
  font-size: 80px;
  color: #ff6666;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  top: 300px;
  animation-name: First;
  animation-duration: 4s;
}

@keyframes First {
  0% {
    top: 10px;
  }
  50% {
    top: 400px;
  }
  100% {
    top: 300px;
  }
}

.smallletters {
  font-size: 40px;
  letter-spacing: 0.5em;
  display: inline;
  animation-name: Second;
  animation-duration: 4s;
  position: relative;
}

@keyframes Second {
  0% {
    top: 0px;
  }
  100% {
    top: 300px;
  }
}

＆＃13;

<header id="main-header">
  <h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

＆＃13;

Answer 2

不确定你想要什么，但你应该改变两到三件事，这取决于你真正想要的东西：

1。）相同的动画名称拼写（“第二”与“第二”），2。）position: relative用于跨度，3。）display: inline-block用于跨度

#txtName {
  font-size: 80px;
  color: #ff6666;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  top: 300px;
  animation-name: First;
  animation-duration: 4s;
}

@keyframes First {
  0% {
    top: 10px;
  }
  50% {
    top: 400px;
  }
  100% {
    top: 300px;
  }
}

.smallletters {
  font-size: 40px;
  letter-spacing: 0.5em;
  display: inline;
  position: relative;
  animation-name: second;
  animation-duration: 4s;
}

@keyframes second {
  0% {
    top: 0px;
  }
  100% {
    top: 300px;
  }
}

<header id="main-header">
  <h1 id="txtName">Oded Menashe<span class="smallletters">Hair Styling</span></h1>
</header>

Answer 3

默认情况下，

span标记为display: inline，因此会忽略位置说明（边距，顶部，左侧等）。

如果您想应用（或动画）这些属性，请给它display: block或inline-block。

动画不会在<span>上工作

3 个答案: