keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト

[kjw_junichi]

ベンダープレフィックスをもう少しうまく扱えないのかなぁ

[jed_lee]

CSS3のアニメーションプロパティ @keyframes の解説とリファレンス記事。

[ama-ch]

keyframes mixinはInterpolation使って#{$animation-name}としないと動かないような。Autoprefixerがオススメです。

[apple2tea]

“keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法”

[poppun1940]

こんにちは！　フロントエンドエンジニアのせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をも

[minonet]

keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 こんにちは！　フロントエンドエンジニアのせいとです。 最近のブログではまとめ記事中心に書いていたのですが、この [...] ...