0

我创建了一个小标题选项卡，在悬停时它的填充向右过渡超过 1 秒。我已经在 Chrome、Opera、IE10 和 FF 中对其进行了测试，它按预期工作。奇怪的是，在 Safari 中它根本没有接受过渡。事实上，它也会在悬停时将元素向右移动 1px。我没有遇到任何这样的具体案例，所以不确定它是已知的错误还是我的疏忽。这是代码：

HTML

<h2 class="screen-button about-button">About</h2>

CSS

.screen-button {
    border-radius: 0 0 14px 14px;
    float: left;
    font-size: 2em;
    margin: 0;
    padding: .3em .5em .4em;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: padding-right 1s ease-in-out;
    -moz-transition: padding-right 1s ease-in-out;
    -o-transition: padding-right 1s ease-in-out;
    -ms-transition: padding-right 1s ease-in-out;
    transition: padding-right 1s ease-in-out;
}

.screen-button:hover {
    padding-right: 91%;
}

.about-button {
    background: rgb(69,237,248);
    background: rgba(69,237,248, .8);
}

这是小提琴：http: //jsfiddle.net/julsfelic/m429p/1/

4

1 回答 1

1

问题是您想要在 Safari 中进行动画制作em不起作用%。尝试使用相同的单位为正常状态和悬停状态设置填充。至少填充权（例如：）padding: .3em 3% .4em。

于 2013-03-13T06:01:51.293 回答