代码之家 › 专栏 › 技术社区 › Max Crull

转换在Firefox中有效,但在webkit浏览器中无效

transition transform webkit css html

2

Max Crull · 技术社区 · 12 年前

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

1 回复 | 直到 12 年前

1

Max Crull 12 年前

好吧,所以我按照Paulie_D的建议做了,并将尺寸增加作为动画而不是过渡。它现在似乎起作用了。我应该注意到,我在.h-left的非webkit动画中为twist right添加了.25s的延迟,以使其与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