Why my animation property is not working in CSS

Question

I am trying to use animation property in CSS to move a div from left to right. But the code isnt working.

I am new to animation property in CSS. I had refer to some article in W3Schools and StackOverFlow but still didnt make it.

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

<div id="title">Soy Boos</div>

The word Soy Boos should move from left to right

score 4 · Answer 1 · edited Apr 23 '19 at 08:40

Hey @Gan read about left property from the w3schools it have the following definition and usages

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

• If position: absolute; or position: fixed; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor.

• If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.

• If position: sticky; - the left property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.

• If position: static; - the left property has no effect.

So you just have to add position attribute to your #title element for left attribute to work...

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:relative; /* this one */
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

<div id="title">Soy Boos</div>

Vikas Jadhav · Answer 2 · 2019-04-23T07:48:59.243

1

You need to set position:absolute or position:relative to #title

because in order to work left you need to specify a position like absolute or relative

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:absolute;
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

<div id="title">Soy Boos</div>

edited Apr 23 '19 at 07:48

answered Apr 23 '19 at 07:29

Vikas Jadhav

4,597
2
19
37

score 0 · Answer 3 · answered Apr 23 '19 at 07:39

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes move {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

Hello @Satish welcome to SO, please provide *how* these snippet works or include the source of it, your answer is too good... — vaku, Apr 23 '19 at 07:57

Why my animation property is not working in CSS

3 Answers3