控制动画比例

Question

我正在学习CSS动画。

尝试操纵每个动画的缩放量。

我需要将图像放大 less （不要慢），而不是现在这样做并返回缩小状态。

我可以控制哪些的CSS属性可以控制它进出的变焦量？

我喜欢这样一种场景，它只会放大到足以让 >不在帧外，然后再向后退出。

＆＃13;

＆＃13;

.wrapper {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin: 50px auto 50px auto;
  overflow: hidden;
}

.frame {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-image: url('http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc');
  -webkit-animation: zoomeffect 10s infinite;
  -moz-animation: zoomeffect 10s infinite;
  animation: zoomeffect 10s infinite;
}

@-webkit-keyframes zoomeffect {
  0% {
    background-position: center;
    transform: scale(1, 1);
  }
  50% {
    background-position: center;
    transform: scale(2, 2);
  }
  100% {
    background-position: center;
    transform: scale(1, 1);
  }
}

@keyframes zoomeffect {
  0% {
    background-position: center;
    transform: scale(1, 1);
  }
  50% {
    background-position: center;
    transform: scale(2, 2);
  }
  100% {
    background-position: center;
    transform: scale(1, 1);
  }
}

＆＃13;

<div class="wrapper">
  <div class="frame">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过在@keyframes类中使用50％代码来更改放大的距离，我将其更改为1.5。尝试使用1.0 - 2.0中的值来获得所需的缩放量。

50％{         背景位置：中心;       变换：刻度（1.2,1.2）;     }

＆＃13;

＆＃13;

.wrapper{
  width:300px;
  height:300px;
  border:2px solid black;
  margin:50px auto 50px auto;
  overflow:hidden;
}

.frame{
  height:100%;
  width:100%;
  background-position:center;
  background-size:cover;
  background-image: url('http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc');
   -webkit-animation: zoomeffect 10s infinite;
   -moz-animation: zoomeffect 10s infinite;
   animation: zoomeffect 10s infinite;
}

@-webkit-keyframes zoomeffect{
		0%{
			background-position:center;
		  transform:scale(1,1);
		}
		50%{
			background-position:center;
		  transform:scale(1.5,1.5);
		}
		100%{
			background-position:center;
		  transform:scale(1,1);
		}
}
@keyframes zoomeffect{
		0%{
			background-position:center;
		  transform:scale(1,1);
		}
		50%{
			background-position:center;
		 transform:scale(1.5,1.5);
		}
		100%{
			background-position:center;
		  transform:scale(1,1);
		}
}

＆＃13;

<div class="wrapper">
  <div class="frame">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;