CSSアニメーション
CSSアニメーション サンプル集の続編です。
1日1個30分、CSS3でアニメーションパーツをひたすら作り続けるというもの。
前回の記事からサンプルが増えてきたので、第二弾としてまとめました。
Rainbow Ring Loading
ローディングアイコンはCSSアニメーションの練習テーマとしてベスト。mix-blend-mode と fliter を駆使して、虹のような表現ができる。
See the Pen OnlyCSS: Rainbow Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen.
mix-blend-mode は、フロントエンドエンジニアとデザイナーの摩擦を改善する、超画期的なプロパティ。
もう乗算でもスクリーンでもなんでも来い！
Night Rider Loading
往年のナイトライダー風CSSローディング。animation-delay を駆使して、光が流れる表現ができる。
See the Pen OnlyCSS: Night Rider by Yusuke Nakaya (@YusukeNakaya) on CodePen.
K.I.T.T.「ハイ、マイケル。1つの要素に対してclass属性による animation プロパティの貼り替えは、思ったより難しいので注意してください。」
Dancing Light Loading
box-shadow だけで、光やボカシ感のある表現ができる。
See the Pen OnlyCSS: Dancing Light by Yusuke Nakaya (@YusukeNakaya) on CodePen.
ずっとみてられそうなマッタリ感。
ずっと終わらないローディングなどにどうぞ。
Swim Ring Loading
浮き輪に乗ってプカプカしたい。
夏だし。
See the Pen OnlyCSS: Swim Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen.
filter: drop-shadow は box-shadow によく似てるけど、 inset と「広がり」のパラメータが無い相違点に注意。
Melty Cheese Pizza
とろけるチーズがたまらない、クワトロフォルマッジ。filter プロパティの blur と contrast を駆使して、表面張力を持った液体のような表現ができる。
See the Pen OnlyCSS: Melty Cheese Pizza by Yusuke Nakaya (@YusukeNakaya) on CodePen.
背景色が必須だったり、流体に使える色に制限があり、曲線のコントロールが難しい。
SVGを使えば、より良い表現ができそうな雰囲気。
Semicircle Switcher
急がば回れ。
半回転するON/OFFトグルスイッチ。
See the Pen OnlyCSS: ON/OFF Switch by Yusuke Nakaya (@YusukeNakaya) on CodePen.
わざわざ遠回りしてる背徳感。
Infinite Toilet Paper
もしも、トイレットペーパーを無限コロコロできたなら。
See the Pen OnlyCSS: Infinite Toilet Paper by Yusuke Nakaya (@YusukeNakaya) on CodePen.
ハンドルスピンナーに続け！
Floating Ball
簡単な錯視の仕掛けで、立体的な表現ができる。
See the Pen OnlyCSS: Floating Ball by Yusuke Nakaya (@YusukeNakaya) on CodePen.
使ってるプロパティはごく普通でも、光の反射や影の自然なシミュレートには細かい工夫が必要。
増えていくサンプル集
CODEPEN
https://codepen.io/YusukeNakaya/
よかったらフォローしてください！