html - 控制动画比例

Question

我正在学习 CSS 动画。

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

我需要图像比现在放大更少(不慢)，然后返回到缩小状态。

在下面的哪些 CSS 属性上，我可以控制放大和缩小的大小？

我想要这样一种场景，它只放大到足以勉强超出框架范围，然后立即退出。

.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);
  }
}

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

Answer 1

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

50%{ 背景位置:中心； 变换:比例(1.2，1.2)；

.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);
		}
}

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