Как улучшить эффект анимации при наведении изображения с помощью transform: scale and origin? - PullRequest
Новая
       67

Как улучшить эффект анимации при наведении изображения с помощью transform: scale and origin?

0 голосов
/ 07 ноября 2019

Может ли кто-нибудь помочь мне избавиться от неустойчивой «привязки» в конце этой анимации эффекта наведения, которая появляется в Google Chrome? Или объясните, почему происходит «защелкивание»?

Я ищу практические решения для эффекта, который бы создавал ощущение, будто обложка журнала немного приподнята с полки, поэтому вверх и «наружу» этоИдея, которую я иду за. Если вы наведете курсор на крышку, то увидите, что в самом ее конце есть небольшая прерывистая кнопка, которая очень неприятна. Я пытаюсь избавиться от этого, а также понять, что здесь происходит. Любая помощь приветствуется! 

li.newsletter {
      text-align: center;
      width: 100%;  
}

.thumb {
	    line-height: 1px;
	    margin: 0 auto;
}      
.thumb:after{
	    content: "";
	    display: block;
	    height: 16px;
	    width: 100%;
	    background: #cbcbcb;
    	box-shadow: 10px 5px 8px 0 rgba(0,0,0,0.2);
	    width: 100%;
	    z-index: +10;
	    opacity: 0.99; // z-index stack order hack
}
img {
    	transition-duration: 0.2s;
	    transition-property: transform;
	    transition-timing-function: ease;
	    box-shadow: 4px 0px 12px 0 rgba(0, 0, 0, 0.2);
    }
a:hover img {
    	transform: scale(1.05);
    	transform-origin: 50% 100%;
    }
<ul class="newsletters">
  <li class="newsletter">
    <a href="#">
      <div class="thumb">
        <img width="100" height="200" src="https://dummyimage.com/100x200/000000/fff.jpg&text=Magazine+Cover" />           </div>
      <div class="title">
      <div class="newsletter-title">Issue No. 15</div>
      <div class="newsletter-date">September 2019</div>
     </div>
    </a>
   </li>
  </ul>

1 Ответ

0 голосов
/ 07 ноября 2019

Возможно, вам стоит рассказать браузерам точно , что вы хотите анимировать, чтобы не требовалось настраивать анимацию для всех свойств. Просто для этого: 

transition-property: transform;

вместо начальных transition-property: all;, так как all означает all - даже если нечего анимировать, он их вычислит. Если вы можете избежать вычислений, вы получите более плавные переходы.

...