Scale transform in CSS with linear ease animation looks like it slows down?

Question

I want to make effect of zooming into image with constant speed on image hover. I'm using scale transform and linear ease for that but still it feels like it's faster in the beginning and slower at the end. I don't understand why is that happening.

It is important that scale goes to high number and my goal is to make animation last for 10 min.

Can you please advise me how to achieve that and is it possible to do that in CSS at all.

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


}

Here is fiddle example https://jsfiddle.net/radiolaria/x45z43kc/

Answer 1

There is nothing wrong in general here, and the linear works as expected.

The main problems is that the bigger it gets, the smaller one can see of the actual image, hence it looks like this goes slower.

So if you use ease-in it will look more like the zooming is linear, and an even better solution would be to use cubic-bezier(n,n,n,n), to optimize the timing of the transition even more.

$(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>

---

And here is a simple tool you can use to create and test customized cubic-bezier

• https://matthewlein.com/ceaser/