CODEWITHSUNDEEP
htmlcsswebkittransformtransition
Max Crull
Max Crull

Reputation: 31

Transition works in Firefox but not in webkit browser

I'm using CSS to make it so that when you hover over a link, it would use a transition to increase in size slightly and do an animation. It works just fine in Firefox and IE, but in Google Chrome and Safari the transition does not work.

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

Upvotes: 2

Views: 279

Answers (1)

Max Crull
Max Crull

Reputation: 31

Okay, so I did as Paulie_D suggested and made the size increase an animation instead of a transition. It appears to work now. I should note that I added a .25s delay for twist-right in the non-webkit animation for .h-left to make it compatible with 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

Upvotes: 1

Related Questions