自动图像缩放，轻松进出

Question

谁能告诉我如何在这个页面上做类似的事情：

我想在这个网站上做一个无需悬停或单击即可自动缩放图像的功能。无限放大的轻松放大功能。

我用这个 class 但我不知道如何激活它。

    .zoom.visible > img {
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: move;
  animation-name: move;
  animation-direction: alternate;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -o-animation-direction: alternate;
  -ms-transform-origin: middle center;
  transform-origin: middle center;
  -webkit-transform-origin: middle center;
  -o-transform-origin: middle center;
  -moz-transform-origin: middle center;
}

不幸的是，我不知道要在 google 中搜索什么，我希望有人能帮助我朝着正确的方向前进，或者为我提供代码示例。

Answer 1

从网站上复制必要的部分，这就是你需要的

CSS:

.zoom.visible > img {
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: move;
    animation-name: move;
    animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-transform-origin: middle center;
    transform-origin: middle center;
    -webkit-transform-origin: middle center;
    -o-transform-origin: middle center;
    -moz-transform-origin: middle center;
}
.zoom > img {
    height: auto!important;
    width: 100%!important;
}

@-webkit-keyframes move {
  from {
    transform: scale(1);
    text-indent: -9999px;
    ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
  }
  to {
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -o-transform: scale(1.15);
    -moz-transform: scale(1.15);
  }
}
@keyframes move {
  from {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
  }
  to {
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -o-transform: scale(1.15);
    -moz-transform: scale(1.15);
  }
}

它适用于具有与此相同 HTML 结构的图像：

<div class="zoom visible imagen1" style="opacity: 1; margin-top: 0px; height: 678px;">
    <img src="http://placehold.it/800x600" alt="" />
</div>

演示：http://jsfiddle.net/9hwk7jtu/

自动图像缩放，轻松进出

Automatic Image zoom with easy and out

javascript

transition