破碎的动画

Question

这个css动画我到底出了什么问题？

＆＃13;

＆＃13;

@keyframes home {
    0%   {left:0%;}
    50%  {left:100%;}
    100% {left:0%;}
}

#circle {
    animation: home 2s linear infinite;
}

＆＃13;

<section id="circle"></section>

＆＃13;

＆＃13;

＆＃13;

Fiddle link

Answer 1

将position:relative;添加到您的CSS中，以便控制top, right, bottom, left属性

#circle {
  position:relative;
  width: 75px;
  height: 75px;
  background: blue;
  -moz-border-radius: 50%;
  -webkit-border-radius:50%;
  border-radius: 50%;
  animation: home 5s linear infinite;
}


@keyframes home {
    0%   {left:0px;}
    50%  {left:400px;}
    100% {left:0px;}
}

<div id="circle"></div>