2017月07月19日

スマホでも滑らか!CSSアニメーション最強サンプル集 第二弾

CSSアニメーション

CSSアニメーション サンプル集の続編です。
1日1個30分、CSS3でアニメーションパーツをひたすら作り続けるというもの。
前回の記事からサンプルが増えてきたので、第二弾としてまとめました。

Rainbow Ring Loading

ローディングアイコンはCSSアニメーションの練習テーマとしてベスト。
mix-blend-modefliter を駆使して、虹のような表現ができる。

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-shadowbox-shadow によく似てるけど、 inset と「広がり」のパラメータが無い相違点に注意。

Melty Cheese Pizza

とろけるチーズがたまらない、クワトロフォルマッジ。
filter プロパティの blurcontrast を駆使して、表面張力を持った液体のような表現ができる。

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/
よかったらフォローしてください!

RELATED POSTS