Question

我希望在图像悬停时以恒定速度放大图像。我正在使用比例变换和线性简易，但仍感觉它在开始时更快，在结束时更慢。我不明白为什么会这样。

重要的是规模达到高数量，我的目标是使动画持续10分钟。

你可以告诉我如何实现这一点，是否可以在CSS中完成。

HTML

<div class="item">
<img class="full" src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
<div class="item-overlay top"></div>
</div>
</body>

CSS

body *,
html * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body {
  overflow: hidden;
}

.full {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

.full:hover {
  animation: scale 60s linear; //infinite;
}

@keyframes scale {
  100% {
  -webkit-transform:scale(100);
  -moz-transform:scale(100);
  -ms-transform:scale(100);
  -o-transform:scale(100);
  transform:scale(100);
 }


}

这是小提琴的例子 https://jsfiddle.net/radiolaria/x45z43kc/

Answer 1

这里一般没有错，linear按预期工作。

主要问题是它越大，实际图像就越小，因此它看起来会变慢。

因此，如果您使用ease-in，它看起来更像是线性缩放，更好的解决方案是使用cubic-bezier(n,n,n,n)来优化转换时间。

$(document).ready(function() {
	$("img").load(function() {
  		$(this).addClass("zoom");
	});
});

body *,
html * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

body {
  overflow: hidden;
}

.full {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

.full:hover {
  animation: scale 20s cubic-bezier(0.550, 0.055, 0.675, 0.190);  /*infinite;*/
}
  
@keyframes scale {
  100% {
    transform:scale(30);
  } 
}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
 
<div class="item">
	<img class="full" src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
   	<div class="item-overlay top"></div>
</div>

这是一个简单的工具，您可以用它来创建和测试自定义的cubic-bezier

https://matthewlein.com/ceaser/

使用线性简易动画在CSS中进行缩放变换看起来会变慢？

1 个答案: