CSS3 - Fade between 'background-position'

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.

标签： css image sprite fade background-position

4条回答

ゆ、 Hurt°

2楼-- · 2019-07-05 05:50

so basically, you need to perform two things upon :hover

background-position change
fadein 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).

0人赞添加讨论(0) 举报

Animai°情兽

3楼-- · 2019-07-05 05:56

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.

0人赞添加讨论(0) 举报

Juvenile、少年°

4楼-- · 2019-07-05 05:57

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.

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

5楼-- · 2019-07-05 06:03

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>

0人赞添加讨论(0) 举报

CSS3 - Fade between 'background-position'

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间