Using CSS to move title header to the right

user_9721392 0
Viewed 201

This is my HTML and CSS code where I want the animation to take place

.pig {
  animaton-name: apple;
  animation-duration: 3s;
}

@keyframe apple {
  from {
    top: 0px;
  }
  to {
    right: 200px;
  }
}
<div class='pig'>
  <h2> About me </h2>
</div>

I'm trying to make my header move to the right, however it is not working, I am new to CSS, and I am using resources online but I can't figure out where I went wrong.

css html
4 Answers

first add position : absolute to .pig class because We need the position to be able to apply top , left , right ,bottom and then edit your animaton-name to animation-name and the last one is edit your keyframe to keyframes

  .pig {
    animation-name: example;
    animation-duration: 3s;
    position: absolute;
}

@keyframes example {
    from {
        right: 0px;
    }

    to {
        right: 200px;
    }
}
  <div class='pig'>
    <h2> About me </h2>
  </div>

user_144076730

Try this

.pig{
  animation: 3s linear 0s  apple;

}

@keyframes apple {
   from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200px);
  }
}
 <div class = 'pig'>
   <h2> About me </h2>
    </div>

user_107481250

here is it it will help you move your header towards right

 .pig {
    animation-name: example;
    animation-duration: 3s;
    position: absolute;
}

@keyframes example {
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}
  <div class='pig'>
    <h2> About me </h2>
  </div>

user_133618560 

 .pig {
    animation-name: apple;
    animation-duration: 3s;
    position: absolute;
}

@keyframes apple{
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}
  <div class='pig'>
    <h2> About me </h2>
  </div>

user_121172390
Related