应用动画后 CSS 样式擅离职守

Question

1. 是的，这是一个新手问题
2. 是的，我试着研究了一下

好的。这是代码的链接... Codepen .

<div class="feature container">
    <div class="col-md-12">
        <h1>Welcome to Keller Compensation & HR!</h1>
        <p>Focusing on providing comprehensive compensation and human resources services <br>for small and mid-size companies in a variety of industries.</p>
        <div id="getstarted">
            <a href="#">Get Started</a>
        </div>
    </div>
</div>

所以，我的 .get started a 应该有一个边框。它确实如此，直到我添加了一个动画。我想在动画期间和之后保留它。

Answer 1

在 .feature #getstarted a 之前你有一个额外的“}”

这应该有效:

.feature {
  text-align: center;
  margin-top: 70px;
}

.feature #getstarted {
  margin-top: 40px;
  position: relative;
  animation-name: getstrted;
  animation-duration: 2s;
  animation-fill-mode:
}


/* it was here */
.feature #getstarted a {
  padding: 20px;
  border: 4px solid;
  border-radius: 15px;
}
.feature a:hover {
  text-decoration: none;
  background-color: cadetblue;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes getstrted {
  0% {
    left: -900px
  }

  100% {
    left: 0px
  }
}