CSSスプライトとstepsを使ってアニメーション画像を作ろう

CSSスプライトとstepsを使ってアニメーション画像を作ろうCSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 steps の記述方法steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば 5 段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move { t

[JunichiMatsubara]

こういうのいいなぁ！

[sutanto1983]

アニメーション　動き　css

[yugo_yamamoto]

Andoridのchromeでは動かなかった。

[candykebin]

ここにもtwitterの♡アニメーションあった

[toaruR]

Chrome、微妙にずれる?!(・ω・)

[o9ra]

css3 steps animation

[digitalglm]

CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス: CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps…

[thinktaro]

勉強になりました

[aquarickn]

アニメーションの説明、わかりやすい。