jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark

2015/10/27 334 users jQuery Webpark スクロール アニメーション デモ

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました... 続きを読む

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation

2015/04/12 405 users CSS HTML css animation ディズニー社

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するためにCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために... 続きを読む

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com

2013/10/28 116 users Ginpen.com CSSアニメーション マウスホバー

いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む

擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark

2013/07/22 121 users Webpark jQuery ul class a href

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a... 続きを読む

オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark

2013/06/24 470 users Webpark opacity rotate オンマウス 通り

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下... 続きを読む

CSSだけで作る動きのあるドロップダウンメニュー｜Webpark

2013/04/09 222 users Webpark CSS ドロップダウンメニュー HTML 最初

よくあるタイプのドロップダウンメニューをCSSだけで作りました。CSS3のtransitionを使うことで動きを付けています。また、最近フラットなデザインが流行っているようなので、何となくフラットな感じにしてみました。 今回は最初のサンプルを詳しく解説します。後の2つは少し変えるだけで作ることができます。コードはサンプルの下に載せています。 では、HTMLから解説していきます。 HTML <ul ... 続きを読む

CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー｜Webpark

2013/03/11 104 users Webpark 丸いボタン サンプル 基準 CSS3

最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプル... 続きを読む

CSSアニメーションの初歩をおさらい｜WEB Drawer

2012/12/20 239 users 初歩 おさらい CSSアニメーション WEB Drawer

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたので... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） ｜ クラスメソッド開発ブログ

2012/11/15 296 users HTML クラスメソッド開発ブログ CSS3アニメーション

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3... 続きを読む