Using CSS to move title header to the right - html

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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