CSS3动画反方向

Question

我先贴一下我的代码

p{
 width: 100px;
 margin:auto;
 text-align:center;
 }
 p:hover{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: -100% 6px;
  animation-name: in;
  animation-duration: 1s;
  /*animation-direction: reverse;*/
 }
 
 @keyframes in {
    0% { background-position: -100% 6px; }
    100% { background-position: 100% 6px; }
}

<p>TESTING</p>

Demo

我想让背景从左到右动画，但没能做到。我试过 animation-direction: reverse; 没有任何运气。

你们能指导我解决这个问题吗？

谢谢

Answer 1

尝试为关键帧 100% 应用 background-position: 200% 6px;。

p{
  width: 100px;
  margin:auto;
  text-align:center;
 }
 p:hover{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
     background-position: -100% 1px;
  animation-name: in;
  animation-duration: 1s;
     animation-direction: reverse;
 }
 
 @keyframes in {
    0% { background-position: 100% 6px; }
    100% { background-position: 200% 6px; }
        }

<p>TESTING</p>

这是codepen demo

Answer 2

我认为它的工作很好

   p:hover{
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
        background-repeat: no-repeat;
        background-position: -100% 1px;
        animation-name: in;
        animation-duration: 1s;
        animation-direction: reverse;
    }

    @keyframes in {
        0% { background-position: 100% 6px; }
        100% { background-position: 200% 6px; }
}

p{
 width: 100px;
 margin:auto;
 text-align:center;
 }
 p:hover{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: -100% 1px;
  animation-name: in;
  animation-duration: 1s;
  animation-direction: reverse;
 }
 
 @keyframes in {
    0% { background-position: 100% 6px; }
    100% { background-position: 200% 6px; }
}

<p>TESTING</p>

CSS3动画反方向

CSS3 animation reverse direction

css

animation

direction