how to make this animation move on chrome even after adding @webkit?-CodePudding

I'm on chrome and have added @-webkit-keyframes and -webkit-animation property. The div doesnt move left. what went wrong?

.oneDiv{
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation: oneAnimation 5s;
  animation: oneAnimation 5s;
}




@-webkit-keyframes oneAnimation {
  0%   {left: 0px; background: red;}
  25%  {left: 100px; background: blue;}
  50%  {left: 100px; background: yellow;}
  75%  {left: 40px; background: green;}
  100% {left: 0px; background: red;}
}


@keyframes oneAnimation{
  0%   {left: 0px; background: red;}
  25%  {left: 100px; background: blue;}
  50%  {left: 100px; background: yellow;}
  75%  {left: 40px; background: green;}
  100% {left: 0px; background: red;}
}

<div ></div>

CodePudding user response：

The left css property wont work on block elements. Changing the .oneDiv to have position: absolute; or position: relative seems to do the trick!

.oneDiv{
  width: 100px;
  height: 100px;
  background-color: red;
  -webkit-animation: oneAnimation 5s;
  animation: oneAnimation 5s;
  position: absolute;
}




@-webkit-keyframes oneAnimation {
  0%   {left: 0px; background: red;}
  25%  {left: 100px; background: blue;}
  50%  {left: 100px; background: yellow;}
  75%  {left: 40px; background: green;}
  100% {left: 0px; background: red;}
}


@keyframes oneAnimation{
  0%   {left: 0px; background: red;}
  25%  {left: 100px; background: blue;}
  50%  {left: 100px; background: yellow;}
  75%  {left: 40px; background: green;}
  100% {left: 0px; background: red;}
}

<div ></div>