css - 从 150% 到 100% 的弹跳动画 -css

Question

我有一个图像圆圈图像，但我没有设法根据需要对其进行动画处理

<div class="icon>
    <div class="absoulte">count</div>
   <img src="circle_image_src">
</div>

我怎样才能在没有javascript的情况下只在css中做一个弹跳动画图片应该从 150% 开始到 100% 然后停在那里，

2-在动画中。当有一个计数时，我希望圆圈达到 150%，然后将计数 div absoulte 更改为某些东西(自由文本)，然后才返回到 100%(如果有帮助，我有 Angular 范围变量)

谢谢你的帮助

Answer 1

要更改图像的比例，请尝试使用此关键帧:

@keyframes bounce {
    0% {transform: scale(2, 2);}
    100% {transform: scale(1, 1);}
}

这可能是这样的:

.icon {
	background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
	position: absolute;
	top: 30%;
	left: 30% ;
	width: 256px;
	height: 256px;
	animation: bounce 2s forwards;
}

@keyframes bounce {
	0% {transform: scale(2, 2);}
	100% {transform: scale(1, 1);}
}

<div class="icon"></div>

阅读更多关于 CSS3 @keyframes Rule 的信息