弹跳动画从150％到100％-CSS

我有一个图像 - 图像圈，我没能制作动画，因为我需要弹跳动画从150％到100％-CSS

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

我如何在CSS只做不javascript中的反弹动画图像应该从150％开始并进入100％并停在那里，

2-在动画中。当有一个计数的数字，我希望圆圈达到150％，然后改变计数div absoulte为somethins（自由文本），然后返回到100％（我有角度范围变量，如果它的帮助）

thx帮助

来源

2017-02-28 Scopi

CSS不能改变DIV文本。 – Justinas

你可以使用关键帧和内容来改变文本 - 小提琴https://jsfiddle.net/eby9fhyg/ –

要更改图像的规模，尽量使用关键帧：

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

这可能是这样的：

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

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

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

了解更多关于CSS3 @keyframes Rule

来源

2017-02-28 13:47:47

弹跳动画从150％到100％-CSS

回答

相关问题