彈跳動畫從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

回答

相關問題