[B! css][animation] usako1124のブックマーク

CSSイージングのお手本 - ease-out, ease-in, linearの使い分け - ICS MEDIA

イージングとは「動きの加減速」を示す用語で、アニメーションにおいては動きの「性格」を表すものです。適切なイージングを設定することで、ユーザーへ与える印象がかわります。ユーザー体験をデザインするうえでイージングは欠かせない要素です。しかし、イージングは多くの種類があり、それぞれを把握し的確に使い分けるのは少し難易度が高いかもしれません。本記事はイージングの選定に役立つ、お手本的な使い分け方を紹介します。この記事の要約イーズインは徐々に加速、イーズアウトは徐々に減速。「イーズアウト」は多くの場面で「変化の余韻が残りやすい印象」でオススメ。リニア（linear）は透明度の変化に使うとよい。 CSSのデフォルトのイージングは性格が弱いので、cubic-bezier()を使うのがよい。イージングの性格冒頭でも触れましたが、イージングは「最初はゆっくりで、徐々に早く変化させる」といった動き

usako1124 2018/07/12

リンク

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

usako1124 2018/05/22

リンク

CSSアニメーションの基礎

今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も

usako1124 2018/05/22

リンク

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

usako1124 2018/04/13

リンク

[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。 basicScrollの特徴他のスクリプトへの依存はゼロ CommonJSとAMDのサポートシンプルなJavaScript API ブ

usako1124 2018/02/21

リンク

はてなブックマーク

タグ

関連タグで絞り込む (3)

cssとanimationに関するusako1124のブックマーク (5)

お知らせ

月間はてなブックマーク数ランキング（2024年9月）

今週のはてなブックマーク数ランキング（2024年9月第5週）

今週のはてなブックマーク数ランキング（2024年9月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス