我有一个图像圆圈图像,但我没有设法根据需要对其进行动画处理
<div class="icon>
<div class="absoulte">count</div>
<img src="circle_image_src">
</div>
我怎样才能在没有javascript的情况下只在css中做一个弹跳动画 图片应该从 150% 开始到 100% 然后停在那里,
2-在动画中。当有一个计数时,我希望圆圈达到 150%,然后将计数 div absoulte 更改为某些东西(自由文本),然后才返回到 100%(如果有帮助,我有 Angular 范围变量)
谢谢你的帮助
最佳答案
要更改图像的比例,请尝试使用此关键帧:
@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 的信息
关于css - 从 150% 到 100% 的弹跳动画 -css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42509860/