Home Ask Login Register

Developers Planet

Your answer is one click away!

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>

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.


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;

/* 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


Leave an answer

Quote of the day: live life