なぜスプライト画像がすぐに変わらないのですか？

-2

私は画像を "点滅"させる、すなわち即座に変更するが、カルーセルのように機能する。私はどこで間違いを犯したのですか？ http://cssdeck.com/labs/1o63nrrv3t なぜスプライト画像がすぐに変わらないのですか？

body { 
 
background-color: black; 
 
} 
 

 
.logo { 
 
    height: 850px; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.logo:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    height: 75px; 
 
    width: 400px; 
 
    top: 400px; 
 
    z-index: 1; 
 
    background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat; 
 
    font-size: 0; 
 
    line-height: 0; 
 
    animation: play 1s infinite; 
 
} 
 
@keyframes play { 
 
    100% { 
 
    background-position: center -75px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<head> 
 
    <title>Logo</title> 
 
</head> 
 
<body> 
 
<header> 
 
    <div class="logo"></div> 
 
</header> 
 
</body>

出典

2016-11-21 vNottbeck

あなたのコミュニティの利益を得るためにここにあなたのコードを通過することをお勧めします。あなたのリンクが消滅した場合、そのページは将来他の誰にとっても役に立たなくなります。 –

を使用している：ここでは

コードです

代わりにこのCSSを使用して、それを動作させることができます

 

    body { 
    background-color: black; 
    } 

    .logo { 
     height: 850px; 
     width: 400px; 
     margin: 0 auto; 
    } 
    .logo:before { 
     content: ""; 
     display: inline-block; 
     position: absolute; 
     height: 75px; 
     width: 400px; 
     top: 400px; 
     z-index: 1; 
     background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat; 
     font-size: 0; 
     line-height: 0; 
     animation: play 1s infinite; 
    } 
    @keyframes play { 
     0%{ 
     background-position:center top; 
     } 
     50%{ 
     background-position:center top; 
     } 
     51%{ 
     background-position:center bottom; 
     } 

     100% { 
     background-position:center bottom; 
     } 
    }

出典

2016-11-21 11:15:37

あなたはあなたの写真が点滅したい場合は、あなたがしなければならないすべては不透明

body { 
background-color: black; 
} 

.logo { 
    height: 850px; 
    width: 400px; 
    margin: 0 auto; 
} 
.logo:before { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    height: 75px; 
    width: 400px; 
    top: 400px; 
    z-index: 1; 
    background: url("https://i.stack.imgur.com/sOemp.png") center top no-repeat; 
    font-size: 0; 
    line-height: 0; 
    animation: play 1s infinite; 
    opacity:0; 
} 
@keyframes play { 
    from{opacity:0;} 
    to {opacity:1;} 
}

see your example here

出典

2016-11-21 10:53:05 Chiller

なぜスプライト画像がすぐに変わらないのですか？

答えて

関連する問題