CSS3가 글꼴 크기를 전환 할 수 있습니까?

CSS3가 글꼴 크기를 전환 할 수 있습니까?

---

마우스 오버시 글꼴 크기를 어떻게 크게 만들 수 있습니까? 색상 전환은 시간이 지남에 따라 잘 작동하지만 어떤 이유로 글꼴 ​​크기가 즉시 전환됩니다.

샘플 코드 :

body p {
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;
}

 p:hover {
      font-size: 40px;
      color:#FC0;
 }

---

시간이 지남에 따라 색상이 잘 전환되지만 약간의 이유 때문에 글꼴이 즉시 전환됩니다.

귀하의 font-size전환은 당신의 덮어 쓰기되고 color전환.

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

대신, 모두 하나의 선언으로 결합해야합니다.

transition: color 12s, font-size 12s;

참조 : http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

(또는, 그냥 사용 all키워드 : transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/ ).

---

모든 속성에 대해 설정 전환을 시도하십시오.

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

그것은 또한 작동합니다.

또는 글꼴 : transition: font 0.3s ease.

---

에 대한 전환은 font-size픽셀 단위 로 보이므로 매끄럽지 않습니다.

If it's just one line, you might be able to use transform: scale(.8). Scale down and not up so you don't lose quality. You will likely also need to use transform-origin: 0 0 or a different value depending on your text alignment.

---

JS Fiddle Demo

An alternative would be that you can also use a framework such as jQuery Transit to do this easily for you:

Javascript:

$("p").hover( function () {
    //On hover in
    $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000);    
}, function () {
    //On hover out
    $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000);
});

CSS:

p 
{

font-size: 12px;
color: #0F9;

}

참고URL : https://stackoverflow.com/questions/9311116/can-css3-transition-font-size