間隔は

Question

私の問題は、私は2秒ごと

<div class="reduce"> text </div> 

.reduce{ 
transition: 2s linear all; 
font-size : 20px; 
} 

どのように私はそれが唯一のCSSで行うことができます10％で、フォントサイズを小さくしたいということであるCSSのテキストのフォントサイズを縮小しますか？

Answer 1

あなたはcssという唯一の解決策を尋ねましたが、数行のjqueryで問題なく動作させることができます。間隔を設定し、一定時間後にfont-sizeを変更するには、2つの異なる機能を使用する必要があります。

var textuptimer = setInterval(textup, 1000); 
function textup() { 
    $(".heart").css("font-size", "1em"); 
} 

var textdowntimer = setInterval(textdown, 2000); 
function textdown() { 
    $(".heart").css("font-size", "0.8em"); 
} 

Here作業フィドルです。あなたがそれを行うことができ

Answer 2

一つの方法は、CSSアニメーションである：直線

div { 
 

 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 15s; 
 
    animation-fill-mode: forwards;/*leaves properties at values from the end of animation*/ 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    0% {font-size: 20px;} 
 
    100% {font-size: 0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {font-size: 20px;} 
 
    100% {font-size: 0px;} 
 
}

<div>text</div>

フォントサイズの変更。あなたはこれらの変更は、あなたには、いくつかの特定の値にそれらを設定することができます別工程で発生する場合に備え ：

@keyframes example { 
    0% {font-size: 20px;} 
    10% {font-size: 18px;} 
    20% {font-size: 17px;} 
    30% {font-size: 16px;} 
/* etc...*/ 
} 

は、それがいつまで