応答Spritesheetアニメーションの問題

私は、次のチュートリアルのリンクをたどるのです

、それは（上から下へスライドする）限り、私はできるだけ早く私は画像を交換すると、同じ画像を使用していて、そのアニメーションが急に動作し正常に動作します応答Spritesheetアニメーションの問題

[https://codepen.io/SitePoint/pen/zxXrzP][1] 

[https://i.stack.imgur.com/71Alo.png][2] 

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<style> 
body { 
    padding: 20px; 
    text-align: center; 
} 

.parent { 
    position: relative; 
    width: 70%; 
    margin: -10% auto 0 auto; /* positioning tweak */ 
} 

.parent:before { 
    content: ""; 
    display: block; 
    padding-top: 61.37%; 
} 

.ryu { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 

    background: url('cows.png') no-repeat 0 0%; 
    background-size: 100%; 
    animation: sprite 3.5s steps(45) infinite; 
} 

@keyframes sprite { 
    from { background-position: 0 0%; } 
    to { background-position: 0 100%; } 
} 

h1 { 
    font-size: 1.2em; 
} 

.p { 
    margin-top: 120px; 
    font-size: 14px; 
} 
</style> 
</head> 
<body> 

<h1>Demo 2: Responsive Sprites Animation</h1> 

<p>A responsive, pure-CSS, looping sprite animation with a fluid width of 70% of the viewport. Resize the window!</p> 

<div class="parent"> 
    <div class="ryu"></div> 
</div> 

<p class="p">Demo by Tom Bennet. <a href="http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock" target="_blank">See article</a>.</p>

私は推測することができ、ファイルcows.pngを知らず

おかげで、 fa12ms0013

出典

2017-04-16 Ali Haider

外部リンクに頼らないでください - 明日は消えてしまうかもしれません。代わりに、あなたのコードを投稿し、コードに関して質問してください。「以下のチュートリアル」ではありません。 – Pharaoh

私は自分のHTMLとCSSを編集しました。このチュートリアルはhttps://codepen.io/SitePoint/pen/zxXrzPでも入手できます私はryu画像を牛に置き換えると誤動作します。 –

。
元の記事では、アニメーションは具体的にはファイルhttps://www.bennet.org/images/codepen/ryu-sprite-demo.pngのために書かれています。
ファイルを変更する場合は、新しいファイルに合わせてアニメーションのステップ（コードの45）を変更する必要があります。

出典

2017-04-16 10:40:27 Pharaoh

応答Spritesheetアニメーションの問題

答えて

関連する問題