【保存版】CSSアニメーションの種類・使い方・サンプル - 株式会社オーツー｜スタッフブログ
こんにちは。 Webデザイナーの山本です。 今回はCSSアニメーションの種類や詳細、使い方の例などをご紹介します！ CSSアニメーションとは？ CSSアニメーションとは、CSSだけでアニメーションすることができる機能のことです。 animationとtransitionの２種類があります。 animationは再生回数を指定したり逆再生や遅延して再生など詳細な指定が可能ですが、transitionはhover（マウスオーバー）などのタイミングで１度だけの再生になります。 主な違いはこんな感じ。 ▼animation ・ループできる ・本格的なアニメーションの設定ができる ・再生後にプロパティの継続ができる ・自動再生ができる ▼transition ・ループできない ・hover等のきっかけが必要（自動再生できない） ・再生後にプロパティが元に戻る animation animationは
borderの伸縮を使ったCSSアニメーションサンプル集 | 1 NOTES
CSSでborderが伸縮させるアニメーションのパターンサンプル集です。 このページでは、テキストの下線として表示するborderとして紹介していますが、ボーダーのみの要素作成などの場合も基本は同じですので応用はしやすいかと思います。 また、幅と高さ、背景色を利用して要素そのものをボーダーとして表現する方法などもありますが、このページでは紹介していません。 borderの長さを調節する基本borderプロパティは、borderを指定した要素のwidthがその長さとなります。 例えば、displayプロパティがblockなどの要素では100％となり、displayプロパティがinlineの要素では他の要素がない限り0pxとなり表示されません。 borderの為に要素のwidthを可変すると、テキストなどの他の要素の表示領域にも影響するため、0または短い横幅を指定すると表示できなくなってしまい
setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
お勧めなCSSスライド式サイドバー９選
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. かつて、ナビゲーションメニューは決まってページの一番上に表示されていました。その後、メニューが左か右のカラムに収まっていた時期がありました（中でも特に、左側がメニューのレイアウトが好まれていました）。そして、横からメニューがスライドして出てくる『ドロワーメニュー』の時代が訪れました。突如現れたこのメニューは、とても理にかなっていました。まるでパズルの最後のピースがようやく見つかったかのようです。 そしてこのドロワーメニ
無料のおすすめ最新HTML5テンプレート厳選45個まとめ【2020年版】
スマートフォンからウェブサイトを閲覧するひとが増えたことで、あらゆる端末に対応するレスポンシブなWebサイトが主流となっています。 しかし、「HTML5でWebサイトをゼロから作成するのはちょっと、。」というときは、HTML5でできたテンプレートを活用してみましょう。 この記事では、無料ダウンロードできるオススメのHTML5テンプレートをまとめてご紹介します。 2020年に公開されたものを中心に最新テンプレートを揃えています。Bootstrapフレームワークを利用しているものも多く、手軽にカスタマイズできる点もポイント。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 商用利用もできる無料HTMLテンプレートまとめ Switch あらゆるデバイスでの表示に対応するランディングページ向けテンプレート。ダークモード切り替えも可能で、イラストを背景として効果的に活用
使える！CSSアニメーション 20選 | SONICMOOV LAB
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連：コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
CSSで背景グラデーション+アニメーションで変化する背景色を実装してみよう！ | WebLifeTimes
最近では鮮やかなグラデーションを背景などに採用するというのが1つのトレンドになっていますよね。単色の背景では味気ないと感じた時などに試してみるとインパクトを加えることができるのでオススメです。 CSS3からグラデーションをCSSのみで表現できることができるようになったこともあり積極的にと入れる価値があると思います。また、アニメーションも合わせることでより目を引く背景をつくることが可能です。 それでは、CSSのbackgroundプロパティのlinear-gradientとanimationを利用して背景グラデーション+アニメーションを実装していきましょう！ 背景グラデーションをCSSで実装する方法 背景をグラデーションにするにはbackgroundプロパティにliner-gradient関数を設定します。 background: linear-gradient(#FFB3E7,#FF54C
CSSアニメーションでゆらゆらさせる - Qiita
サンプル http://codepen.io/skwbr/full/JdJWqV （※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...） 解説 フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。 <ul> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> </ul> @keyframes horizontal { 0% { transform:translateX( -3px); } 100% { transform:translateX( 0px); } } @keyframes verti
CSSでリンク下の点線をマーキーツールのようにアニメーションさせる
マーキーとは、Photoshop とかで、範囲選択したときに表示されるあの点線みたいなヤツです。PARK LA FUN というサイトで、これを見かけて面白いなと思ったので、作り方を紹介します。 参考サイト：PARK LA FUN - メニューにマウスを重ねてみてください。 さて、↓が自分で作ってみたデモです。文字にマウスを重ねてみてください。 作り方 jQuery とか CSS3 を使ってんだろうなと思った方は、残念ながらはずれです。このアニメーションは、↓のようなアニーションgif で作っています。 マウスオーバー時に、上の画像を background に設定しています。 a:hover { background: url(marching-ant.gif) bottom no-repeat; } サムネイルに応用（追記） これを応用すると、こんな感じのも作れます。↓マウスを重ねてみてく
背景におもしろい効果を！六角形のアニメｰション「Hex」 - jQueryプラグインまとめ - Webkaru
六角形のアニメーションを実装するプラグイン「Hex」を紹介します。 jQueryプラグイン「Hex」このプラグインを使えば、たくさんの六角形がふわーっと流れるようなアニメーション効果を実装することができます。 オプションでは六角形が流れる方向、色、回数、遅延などを設定することができます。 Webサイト全体の背景やタイトルの背景に使うとおもしろいかもしれませんね。 それではデモページをご覧ください。 「Hex」のデモ ソース（ HTML + jQuery ）<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hex - jQueryプラグイン</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="h
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
アニメーションのきれいなWebサイト10選
Webサイトにおいて、アニメーションの効果はサイトのイメージ向上や平面では表現できない印象をユーザーに届けます。 Webサイトの制作において、エンジニアとデザイナーの意識の合わせ方や調整の仕方など工夫が必要かと思います。 あらかじめこういうサイトを目指しているなどアニメーションの共有ができていれば…と感じることがしばしばあります。 それでは各アニメーションの特徴を合わせてみていきましょう。
ウェブデザイナーが試したい、Webアニメーション無料プラグイン＆ライブラリ75個まとめ【保存版】
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
bouncejs.com - このウェブサイトは販売用です！ - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい｜dwango creators' blog（ドワンゴクリエイターズブログ）
こんにちは、デザイナーのサリーです。 相変わらずJSに対する苦手意識が拭えない私ですが、自分で動きまでつけられるになりたいですよね。私でも扱えそうなライブラリないかな〜と探していたら、「mo.js」というアニメーションライブラリのDEMOが素敵だったので、チュートリアルを見つつ使い方を勉強してみました。 今回は「mo.js」の紹介をしたいと思います。 mo.jsとは？ mo · js – Motion Graphics For The Web 去年リリースされた、滑らかなモーションを実現できるJSライブラリです。 モーションが感動するほど軽快なので、ぜひDEMOをご覧ください。 DEMO motion graphics for the web 公式DEMOその1、ロゴのアニメーションです。美しいです。 軽快にはずむボールが、ちゃんと楕円になっているところに注目・・・！ bubble lay
画像を徐々に表示する CSS アニメーション - FirstLayout
左から・右から・真ん中から画像が際立つ CSS アニメーションの紹介です。アイキャッチ画像や本文中の画像、ランディングページの画像など、いろいろな画像に使えます。 サンプルは、便宜上アニメーションの再生回数を無限にしています（提示している CSS のアニメーション回数は 1 回です）。 共通の HTML 。 <div class="img-wrap"> <img /> </div> 左から徐々に表示するアニメーション。 CSS 。 .img-wrap { overflow: hidden; position: relative; } .img-wrap::before { animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer
CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選
動的なWEBデザインは今では当たり前。 ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。 そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。 ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。 ホタルが飛ぶアニメーション背景CSSSee the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen. グラデーションの色が変化するアニメーション背景CSSSee the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. 動く方眼アニメーション背景CSSSee the Pen Pure css infinite background animati
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
【コピペで簡単！】CSSで作る雨や波、水滴など水系のエフェクトアニメーション7選！
