纯 CSS 图像平移

Question

图像能否在包装内沿随机方向无限缩放和移动？如何使用css关键帧或动画

实现

Link 到 fiddle here

我不知道该怎么做。我很久以前就看过一个 jQuery 幻灯片插件，它可以在包装器中移动图像。我找不到它

<div class="image_wrap">
<img src="/images/img_1.jpg" alt="" />
 </div>

.image_wrap {
   width:580px;
   height:260px;
   overflow:hidden;
}
.image_wrap img {
  width:100%;
  height:100%;
  transform:scale(1.2);
  animation: 1.2s ease 0s normal none infinite running jump;
}

图像应在包装内来回弹跳，不应滑动

Answer 1

这是您要实现的目标吗？

.image_wrap img {
    width:100%;
    height:100%;
    transform:scale(1.2);
    -webkit-animation: 1.2s slideImg linear infinite;
    animation: 1.2s slideImg linear infinite;
}

@-webkit-keyframes slideImg {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
@keyframes slideImg {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

fiddle 中的示例：http://jsfiddle.net/ke9okv2g/2/

Answer 2

http://jsfiddle.net/s18tnu70/ 你的意思是不是更像这些？（我在 Algaros

的帮助下得到了这个解决方案

    .wrapper {
  background-color: #DDD;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}
.image {
  display: block;
  width: 100px;
  height: 100px;

background-image: url(http://www.placehold.it/100x100);
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 400px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 200px; }
}

纯 CSS 图像平移

Pure CSS image pan

jquery

css

animation

slideshow

banner