转换在 Firefox 中有效，但在 webkit 浏览器中无效答案

【问题标题】：Transition works in Firefox but not in webkit browser转换在 Firefox 中有效，但在 webkit 浏览器中无效
【发布时间】：2014-03-07 15:01:00
【问题描述】：

我正在使用 CSS 来制作它，以便当您将鼠标悬停在链接上时，它会使用过渡来稍微增加大小并制作动画。它在 Firefox 和 IE 中运行良好，但在 Google Chrome 和 Safari 中转换不起作用。

HTML：

<body>
<div id="container">
    <div class="banana-block">
        <div class="hover-link h-left">
            <a class="banana-link" href="aboutus">
                <img class="banana" src="http://i.imgur.com/8eKjOt7.png"/>
                <span>About</span>
            </a>
        </div>
    </div>
</div>
</body>

CSS：

.hover-link {
    width:170px;
    height:130px;
    -webkit-transition: -webkit-transform .25s ease;
    /* For Safari 3.1 to 6.0 */
    transition: transform .25s ease, -ms-transform .25s ease;
    -webkit-transform: scale(0.9, 0.9);
    /* Chrome, Safari, Opera */
    -ms-transform: scale(0.9, 0.9);
    /* IE 9 */
    transform: scale(0.9, 0.9);
}
.h-left {
    float:left;
}
.h-left:hover {
    -webkit-animation: twist-right 1s ease-in-out .25s infinite alternate;
    /* Safari and Chrome */
    animation: twist-right 1s ease-in-out .25s infinite alternate;
}
.banana-link {
    width:170px;
    height:130px;
    position:relative;
    text-decoration: none;
    text-align:center;
    color:#FFFFFF;
}
.banana-link img {
    position:absolute;
    left:0;
    top:0;
}
.hover-link:hover {
    -webkit-transform: scale(1, 1);
    /* Chrome, Safari, Opera */
    -ms-transform: scale(1, 1);
    /* IE 9 */
    transform: scale(1, 1);
}
@keyframes twist-right {
    0% {
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(30deg);
        /* IE 9 */
        -webkit-transform: rotate(30deg);
        /* Chrome, Safari, Opera */
        transform: rotate(30deg);
    }
}
@-webkit-keyframes twist-right
/* Safari and Chrome */
{
    0% {
        -ms-transform: rotate(0deg);
        /* IE 9 */
        -webkit-transform: rotate(0deg);
        /* Chrome, Safari, Opera */
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(30deg);
        /* IE 9 */
        -webkit-transform: rotate(30deg);
        /* Chrome, Safari, Opera */
        transform: rotate(30deg);
    }
}
.banana-link span {
    position:relative;
    top:36px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    line-height:1;
    font-family:'Chewy', cursive;
    font-size: 36px;
    text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000;
}
.banana-block {
    display:block;
    height:150px;
}

JSFiddle

【问题讨论】：

过渡是问题还是关键帧？不完全清楚。
过渡@Paulie_D
我猜这是因为关键帧和过渡之间存在冲突，因为它们都涉及transform。如果您禁用关键帧，则过渡似乎有效。：jsfiddle.net/Paulie_D/9AvW4/1
是的，动画效果很好。这是无效的过渡。
嗯...也许是多个动画而不是过渡。这是一个艰难的过程。

标签： html css webkit transform transition

【解决方案1】：

好的，所以我按照 Paulie_D 的建议做了，并让尺寸增加了动画而不是过渡。它现在似乎有效。我应该注意，我在 .h-left 的非 webkit 动画中为twist-right 添加了 0.25 秒的延迟，以使其与 Firefox 兼容。

.h-left:hover {
    -webkit-animation: grow .25s, twist-right 1s ease-in-out infinite alternate;
    /* Safari and Chrome */
    animation: grow .25s, twist-right 1s ease-in-out .25s infinite alternate;
}
@keyframes grow {
    0% {
        -ms-transform: scale(0.9,0.9);
        /* IE 9 */
        -webkit-transform: scale(0.9,0.9);
        /* Chrome, Safari, Opera */
        transform: scale(0.9,0.9);
    }
    100% {
        -ms-transform: scale(1,1);
        /* IE 9 */
        -webkit-transform: scale(1,1);
        /* Chrome, Safari, Opera */
        transform: scale(1,1);
    }
}
@-webkit-keyframes grow {
    0% {
        -ms-transform: scale(0.9,0.9);
        /* IE 9 */
        -webkit-transform: scale(0.9,0.9);
        /* Chrome, Safari, Opera */
        transform: scale(0.9,0.9);
    }
    100% {
        -ms-transform: scale(1,1);
        /* IE 9 */
        -webkit-transform: scale(1,1);
        /* Chrome, Safari, Opera */
        transform: scale(1,1);
    }
}

Fiddle

【讨论】：