[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transitionAnimate」[to-R]
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」 iPhone / iPadではjQueryのanimateメソッドが重いのでCSS3のアニメーションを使いましょうというのがセオリーになっていますが、CSSでアニメーションって結構めんどくさかったりします。 そこで、jQueryのanimateメソッドと同じような記述をするとCSS3のtransition でアニメーションするjQueryプラグイン「jQuery transitionAnimate」を作成しました。 jQuery.transitionAnimate.js 新しいバージョンを「transitionAnimateをバージョンアップ」からダウンロード可能です $(セレクタ).transitionAnimate(params, duration, easi
![CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transitionAnimate」[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
