OnLoad Banner Zoomout

Question

我正在尝试在页面加载时在图像上重新创建zoom-out动画，就像维基百科应用程序一样。我已经让它在悬停时工作，图像轻轻地缩小，但我不知道如何将其用于独立的发射功能。我尝试创建一个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>

Answer 1

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

Here's a fiddle 请注意，您可能还需要添加document.ready（）以确保元素到位。

Answer 2

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

＆＃13;

＆＃13;

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

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

＆＃13;

<h1>Hey there, I'm using ANIMATION</h1>

＆＃13;

＆＃13;

＆＃13;

当然你需要改变你的形象：）