CODEWITHSUNDEEP
htmlcss
Athix
Athix

Reputation: 37

css3 refuses to transition properly

I'm having some issues with css and transitioning. I can get it to either do a smooth transition (where it slides) or an instantanious transition (I would like it to be a smooth fade effect)

My solution must be pure html/css. (I don't want to monkey around with javascript/jquery and the like)

A live example is on my website. (I'd like my end result to be the middle icon's transition, but gradual)

I am using a sprite for the images.

Here is the current source:

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:32px;display:block;}

#home{left:0px;width:32px;}
#home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;}
#home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;}

#prev{left:32px;width:32px;}
#prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;}
#prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;}

#next{left:64px;width:32px;}
#next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;}
#next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="#"></a></li>
  <li id="prev"><a href="#"></a></li>
  <li id="next"><a href="#"></a></li>
</ul>
</body>
</html>

Upvotes: 0

Views: 46

Answers (3)

Hushme
Hushme

Reputation: 3144

you should use opacity to make a fade effect

here is your css http://jsfiddle.net/3jqcX/

  #navlist {
    position:relative;
}
#navlist li {
    margin:0;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
}
#navlist li, #navlist a {
    height:32px;
    display:block;
}
#home {
    left:0px;
    width:32px;
}
#home a {
    background:url('http://www.aeonsplice.com/testicons.png') 0 0;
}
#home a:hover {
    background: url('http://www.aeonsplice.com/testicons.png') 0 32px;
    -webkit-animation:fade 0.5s
}
#prev {
    left:32px;
    width:32px;
}
#prev a {
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0;
}
#prev a:hover {
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;
    -webkit-animation: fade 0.5s;
}
#next {
    left:64px;
    width:32px;
}
#next a {
    background:url('http://www.aeonsplice.com/testicons.png') 64px 0;
}
#next a:hover {
    background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;
    -webkit-animation: fade 0.5s;
}
@-webkit-keyframes fade {
    0% {
        opacity:0;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity:1
    }
}

Upvotes: 2

ericjbasti
ericjbasti

Reputation: 2075

First off, fade isn't a predefined easing function... so you'll need to use a standard ease like you are for #next. Also you need to set the transition on #prev a like so:

#prev a{
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0;
    -webkit-transition: all 0.5s;
}
#prev a:hover{
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;
}

To fade 2 images easily without adding to your markup... just change the background to another image ( ie. testicons-hover.png)... as far as i know all the browsers that support transitions will cross fade the images.

Upvotes: 0

Ryan Sparks
Ryan Sparks

Reputation: 309

You can't directly crossfade between areas of an image using CSS3. The fade attribute is invalid for these circumstances. However you can crossfade between two different images.

Here's a link which will explain it: http://css3.bradshawenterprises.com/cfimg/

Upvotes: 0

Related Questions