OnLoad 横幅缩小答案

【问题标题】：OnLoad Banner ZoomoutOnLoad 横幅缩小
【发布时间】：2017-10-02 22:50:28
【问题描述】：

我正在尝试在页面加载时在图像上重新创建 zoom-out 动画，例如 Wikipedia 应用程序。我让它在悬停时工作，图像轻轻缩小，但我不知道如何将它变成一个独立的触发功能。我尝试创建一个 jquery 函数，该函数刚刚添加了一个具有新比例的类，但似乎不起作用。

谁能帮忙？

//Function I attempted to Use

$(function() {
$('.photo').addClass('shrink')
});

.photo {
	height: 350px;
	widthL 350px;
	border: 1px solid;
	overflow:hidden;
}

.photo img {
	height: 100%;
	width: 100%;
	transition: all .5s;
	transform: scale(1.2);
}

.photo:hover img {
	transform: scale(1);
}

/*
.shrink {
  transform: scale(1)
}

*/

<div class="photo">
	<img src="https://i.pinimg.com/originals/2b/05/14/2b05140a776f25a8047c88fbe2bcbdb9.jpg" alt="">
</div>

【问题讨论】：

标签： jquery html css animation

【解决方案1】：

您只需将 CSS 中的 .shrink 更改为 .shrink img（当然，取消注释），您的目标是 div 而不是图像。

Here's a fiddle 请注意，您可能还想添加一个 document.ready() 以确保元素就位。

【讨论】：

【解决方案2】：

您需要创建动画而不是简单的过渡。像这样的

@-webkit-keyframes zoom {
    0%   {transform: scale(1);}
    100% {transform: scale(0.8); }
}

h1 {
    -webkit-animation: zoom 5s 1;
}

&lt;h1&gt;Hey there, I'm using ANIMATION&lt;/h1&gt;

当然你需要用你的图片来改变 :)

【讨论】：

是否可以在动画中添加缓动或缓入输出，还是只是内置的？
当然！只需将“不透明度：0”添加到 0% 帧，将“不透明度：1”添加到 100% 帧：)