Question

我试图在屏幕上滑动图像，然后保持固定点。我已经在网上找了一些关于我所拥有的变种，但似乎没什么用。

Answer 1

@-webkit-keyframes mini {
    from { 
        left:-166px;
    }
}


.mini {
  background-image: url("http://placehold.it/150x150");
  position: absolute;
  top: 10px;
  left: 404px;
  width: 166px;
  height: 70px;
  z-index: 7;
  -webkit-animation: mini 2s linear;
}

<div class=mini></div>

如果你父母没有overflow: hidden以避免使用滚动条

，那么这就是这个

@-webkit-keyframes mini {
    from { 
        left:0px;
        -webkit-transform: translateX(-166px)
    }
}


.mini {
  background-image: url("http://placehold.it/150x150");
  position: absolute;
  top: 10px;
  left: 404px;
  width: 166px;
  height: 70px;
  z-index: 7;
  -webkit-animation: mini 2s linear;
}

<div class=mini></div>

Answer 2

这将在动画完成后保留动画的最后一帧

animation-fill-mode: forwards;

＆＃13;

@-webkit-keyframes mini {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
    from { 
        left:0px;
    }
    to{
        left:404px;
    }

}

.frame1 {
    -webkit-animation: mini 2s normal forwards;
    -moz-animation: mini 30s normal forwards;
    -o-animation: mini 30s normal forwards;
    animation: mini 2s normal forwards;
    opacity:1;
}

.mini {
  background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
  position: absolute;
  top: 10px;
  left: -404px;
  width: 166px;
  height: 70px;
  z-index: 7;
}

＆＃13;

<div class="frame1 mini">
</div>

＆＃13;

Answer 3

看看这个小提琴。

http://jsfiddle.net/lharby/ysgzpuer/

我必须传入

-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;

到.mini类来设置div的动画。

更新：这也有不透明度动画：

http://jsfiddle.net/lharby/ysgzpuer/1/

通过编辑：

@-webkit-keyframes mini {
from { 
    left:0px;
    opacity:0;
}
to{
    left:404px;
    opacity:1;
}

Answer 4

希望这就是你要找的东西

<强> HTML

<div class="stage">
  <figure class="ball"></figure>
</div>

<强> CSS

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }

  100% {
    left: 488px;
    top: 0;
  }
}
.stage {
  background: #eaeaed;
  border-radius: 6px;
  height: 150px;
  position: relative;
  min-width: 538px;
}
.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-fill-mode: forwards;
}
.stage:active .ball {
  animation-play-state: paused;
}
.ball {
  background: #2db34a;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

Fiddle Demo

使用CSS3动画移动图像

4 个答案: