Isaac Keller February 2016

CSS Styles AWOL After Applying Animations

  1. Yes, it's a novice question
  2. Yes, I tried to research it

Ok. Here's the link to the code... 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>

So, my .get started a is supposed to have a border around it. And it did, until I added an animation. I'd like to retain that during the animation and after.

Answers


Wilkoklak February 2016

You had an extra "}" before .feature #getstarted a

This should work:

.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
  }
}

Post Status

Asked in February 2016
Viewed 2,045 times
Voted 14
Answered 1 times

Search




Leave an answer