Question

图像显示，但不会过渡。

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 */
}
}

Answer 1

目前还不完全清楚这应该是什么样的，我不确定你为什么要在那里定位，因为图像实际上并没有改变尺寸......它只是出现。 / p>

您不能混合供应商前缀。每个供应商都应该自包含每个类型/声明。

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

CSS过渡问题 - 肯烧效应

1 个答案: