I want to fade between 'background-position' of a sprite image only with CSS. I found a lot o tutorials but I didn't found something simple like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
div{
width: 120px;
height: 60px;
background-image: url('sprite.jpg');
background-repeat: no-repeat;
background-position: 0 0;
}
div:hover{
background-position: 0 -60px;
}
</style>
</head>
<body>
<div></div>
</html>
Thank you.
I found the answer, thanks anyway.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
#button{
float: left;
background-image: url('sprite.jpg');
background-position: 0 -60px;
background-repeat: no-repeat;
width: 120px;
height: 60px;
}
#button a{
background-image: url('sprite.jpg');
background-position: 0 0;
background-repeat: no-repeat;
width: 120px;
height: 60px;
display: block;
text-indent: -9999px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
}
#button a:hover,
#button a:focus{
opacity: 0;
}
</style>
</head>
<body>
<div id="button"><a href="#"></a></div>
</html>
You can use CSS3 Animation with @keyframes
div:hover{
animation: logo 2s 0 linear;
}
@keyframes logo{
0% { opacity: 1; }
5% { opacity: 0; }
50% { background-position: 0 -60px; opacity: 0; }
100% { background-position: 0 -60px; opacity: 1; }
}
Example: http://jsfiddle.net/Y8W9S/
Of course, now you have to adjust the times and effect you want to implement.
Hope it's helps or point you in right direction.
Good luck.
so basically, you need to perform two things upon :hover
background-position changefadein effect
CSS3 transition won't be useful in this case.
You can use CSS3 animation property.
animation property accepts name of the animation and duration. Multiple animation names can be provided separated by comma.
you need to define these animation names.They can be any string of your choice, but you need to define them.
so consider this css:
div:hover{
animation: fadein 10s, bp 0.5s;
-moz-animation: fadein 10s, bp 0.5s; /* Firefox */
-webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */
-o-animation: fadein 10s, bp 0.5s;
background-position:0 0;
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes bp { /* Safari and Chrome */
from {
background-position:-200px 0;
}
to {
background-position:0 0;
}
}
see this fiddle, for complete browser supported animation
NOTE: it won't work in IE<9 for sure! and it might in IE9(not sure).
Use like this:
div{
width: 120px;
height: 60px;
background-image: url('sprite.jpg');
background-repeat: no-repeat;
background-position: 0 0;
transition: background-position 1s ease;
}
And don't forget the optional vendor prefixes
Edit:
I've noticed you need fade. You try to similar solution like this:
div{
background: url(foo.jpg) no-repeat 0 0 transparent;
transition: background: 1s ease;
}
div:hover{
background: rgba(0, 0, 0, 1);
}
I can't try this, coz' im from mobile.
