css - CSS过渡问题-Ken Burn效应

图像显示，但不过渡。

CSS代码显示在上传的页面上。

我正在使用EverWeb来构建页面。

下面是我正在尝试的代码。提前致谢。

HTML片段

<div class="image">
<img src="my_image" />
</div>

的CSS

.image {
width: 100%;
height: 350px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image img {
animation: move 30s ease infinite;
/* Change this to alternate to stop the loop. */
-ms-animation: move 30s ease infinite;
-webkit-animation: move 30s ease infinite;
-0-animation: move 30s ease infinite;
-moz-animation: move 30s ease infinite;
position: fixed;
left: -150px;
top: -150px;
}
@-webkit-keyframes move {
from {
transform: scale(0.9);
-ms-transform: scale(0.9);
/* IE 9 */
-webkit-transform: scale(0.9);
/* Safari and Chrome */
-o-transform: scale(0.9);
/* Opera */
-moz-transform: scale(0.9);
/* Firefox */
}
to {
transform: scale(1);
-ms-transform: scale(1);
/* IE 9 */
-webkit-transform: scale(1);
/* Safari and Chrome */
-o-transform: scale(1);
/* Opera */
-moz-transform: scale(1);
/* Firefox */
}
}

最佳答案

目前尚不清楚应该怎么看，而且我不确定您为什么在其中定位，因为图像实际上并没有改变大小……只是看起来而已。

您不能混合使用供应商前缀。.每种类型/语句应独立于每个供应商。

body {
 text-align:center;
 }

.image {
  display: inline-block;
  margin: 5px;
  overflow: hidden;
  position: relative;
}
.image img {
  display: block;
  -webkit-animation: move 5s ease infinite;
  animation: move 5s ease infinite;
  -webkit-transform-origin: center right;
  -ms-transform-origin: center right;
  transform-origin: center right;
  /* adjust for the zoom effect required */
}
@-webkit-keyframes move {
  from {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes move {
  from {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<div class="image">
  <img src="http://lorempixel.com/g/400/200/" alt="" />
</div>

编辑：基于扩展讨论区中的注释，我们有此请求。


  我需要将其放在高度为350px，页面宽度为“固定”在特定位置的容器中。另外，我需要缩小图片以适合350px


因此，我认为HTML中的实际图像不是最佳选择。

带有background-position和background-size动画的背景图像似乎是更合理的选择。

.burns {
  height: 350px;
  margin-top: 10px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  -webkit-animation: ken 10s infinite;
          animation: ken 10s infinite;
}

@-webkit-keyframes ken {
  from {
  background-size: 100%;
  }
  to {
  background-size: 120%;
  background-position: right;
  }
}

@keyframes ken {
  from {
  background-size: 100%;
  }
  to {
  background-size: 120%;
  background-position: right;
  }
}

<div class="burns"></div>

Codepen Demo