Question

我正在使用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

Answer 1

好吧，所以我按照Paulie_D的建议做了，并且将尺寸增加为动画而不是过渡。它现在似乎工作。我应该注意到，我在.h-left的非webkit动画中为tw-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

Transition在Firefox中有效，但在webkit浏览器中无效

1 个答案: