Sassのmixinでユニークなキーフレーム名を宣言する
スプライトアニメーションをコンテンツの背景にフィットさせる - ライデンの新人ブログ
こういうやつを複数回やりたかったのでmixinにした。普通にやるとキーフレーム名がかぶるので、mixinを呼び出すたびにIDをインクリメントさせるようにしたらいけた。
$_sprite-id: -1; @mixin sprite($frame-count, $seconds-per-frame) { $_sprite-id: $_sprite-id + 1 !global; background-size: 100% ($frame-count * 100%); animation: sprite-#{$_sprite-id} #{$frame-count * $seconds-per-frame}s steps($frame-count) infinite; @keyframes sprite-#{$_sprite-id} { from { background-position: left top; } to { background-position: left (100% * $frame-count / ($frame-count - 1)); } } } .sprite1 { @include sprite(3, .1); background-image: url("sprite1.png"); } .sprite2 { @include sprite(12, .2); background-image: url("sprite2.png"); }
keyframesの内容が同じでも複数回宣言するので雑だと思うけど、ちゃんとやるのめんどくさそうなのでやめた。Mapで$frame-count
をキーにしてIDを保存しとくとかすればいけそう。