コマ送り用の一枚画像(横に５つ連なった一枚の画像haikei.jpg)をCSSアニメーションでコマ送りしたいのですがうまくいかず困っています。 一コマ目の画像自体は表示されるのですが、となりの画像に遷移しない状態です。 ただ、@-webkit-keyframes effect内にopacityなどをいれると確認できるので、effect内は通っていることを確認できています。 画像はhtml内に直接srcで呼んでいます。 <img id="haikei" src="haikei.jpg"> #haikei{ position:absolute; width: 500%; height: auto; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 2s; -webkit-animation-delay: 0; -webkit-animation-timing-function: linear; -webkit-animation-name: 'effect'; opacity: 1; background-repeat: no-repeat; -webkit-background-size: 500% 100%; } @-webkit-keyframes effect { 0% { background-position: 0% 0%; } 25% { background-position: 20% 0%; } 50% { background-position: 40% 0%; } 75% { background-position: 60% 0%; } 100% { background-position: 80% 0%; } } 何がダメなのか困りきっています。 どなたかご教授頂けたら幸いです。
↧