CSS 3 - 秤的过渡谷歌浏览器弹回 [英] CSS 3 - Scale transition snaps back in google chrome

问题描述

我有一个问题，我有以下的code我使用使用CSS3过渡增加了规模，最终它增加后弹回原来的规模。

CSS：

 。大{
        过渡：所有的0.3秒轻松-IN-OUT;
        显示：内联;
}
。大：悬停{-webkit-变换：规模（1.4）;
}
 

HTML

 ＆LT; H1类=大＆GT;＆错字LT; / H1＆GT;
 

解决方案

请尝试使用inline-block的，而不是内联（也，建议添加兼容浏览器的其他部分一样）。

CSS：

 。大{
    -webkit-转型：所有的0.3秒轻松-IN-OUT;
    -moz-转型：所有的0.3秒轻松-IN-OUT;
    -o过渡：所有的0.3秒轻松-IN-OUT;
    过渡：所有的0.3秒轻松-IN-OUT;
    显示：inline-block的;
}
。大：悬停{
    -webkit-变换：规模（1.4）;
    -moz-变换：规模（1.4）;
    -o变换：规模（1.4）;
    变换：规模（1.4）;
}
 

HTML

 ＆LT; H1类=大＆GT;＆错字LT; / H1＆GT;
 

在这里测试一下： http://jsfiddle.net/XbUC8/

I have an issue , I have the following code I am using for increasing the scale using CSS3 transition , at the end it snaps back to its original scale after increasing.

CSS:

.big{


        transition:all 0.3s ease-in-out;
        display:inline;
}
.big:hover{

-webkit-transform:scale(1.4);
}

HTML :

<h1 class = "big">Typo</h1>

解决方案

Try using inline-block instead of inline (also, it's recommended to add compatibility to the rest of the browsers as well).

CSS:

.big {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}
.big:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

HTML:

<h1 class="big">Typo</h1>

Test it here: http://jsfiddle.net/XbUC8/

这篇关于CSS 3 - 秤的过渡谷歌浏览器弹回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！