CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Autoprefixerの@keyframes animation の処理に違和感があったけど、僕が間違っていた - dskd
Autoprefixerの@keyframes animation の処理に違和感があったけど、僕が間違っていた 公開日2014-05-07タグCSSポストプロセッサーのAutoprefixer、大変強力で素晴らしく便利なのだけど、@keyframes の処理には違和感があった。 以下の様な CSS ルールセットがあったとする。translate で要素の Y 座標を+300px するだけの簡単なアニメーション。animation-deday, animation-iteration-count, animation-direction は規定値ということでショートハンドで省略している。 .ugoku { animation: ugoku 0.5s ease-in; } @keyframes ugoku { 0% { transform: translate(0px, 0px); } 10
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
