CSSの opacityと transitionを使用して、オンマウス(hover)した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過(フェードイン)できますが、マウスアウトした時にフェードアウトする方法です。 HTMLのソースは以下の通りです。 HTML
![CSS:オンマウス(hover)で画像をフェードする | design Edge](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2e394e97b4f9ef5e889d5f6ca16b54f7cd96d61/height=288;version=1;width=512/https%3A%2F%2Fedge.sincar.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F06%2Fmv1.png)
CSS3 のみで display: none; の状態からからフェードインさせる方法を調べてみました。たとえば特定のクラスがついたときにフェードインさせるには下記のようにすればできました。 display の animation はできないので、下記のように 1% のキーフレームを追加して 表示かつ opacity: 0; としておくのがポイントです。 Gist 動作サンプル <!DOCTYPE html> <html> <head> <meta charst='utf-8'> <title>TEST</title> <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <style> .box { background: #000000; display: none; h
CSSでアニメーションするにはtransitionもありますが今回は animationを使う方法です このページでは手抜きのため ベンダープレフィックスは-webkitだけ書いてますが必要に応じて-mozなどをつけてください animationの使いかた /* キーフレームを作成 */ @-webkit-keyframes fadein { 0%{ opacity:0; } 75%{ opacity:0.5; } 100% { opacity:1; } } /* キーフレームをanimationプロパティで指定 */ div#in{ -webkit-animation: fadein 3s linear 0s 1; } key-framesは0%や100%などの%ごとにスタイルを指定します 0%が最初で100%最後のフレームです 0%から100%の間で途中経過を指定できます 50%ならち
WEBサイトにアニメーションを設定すると、WEBサイトが少しリッチになります(過剰な演出はちょっとウザくなります)、ということで今回はopasityを使って、画像やテキストが スーーーっと消えたり現れたりするアニメーション効果を作ってみようということです。 transitionの書き方 CSSのtransformの書き方です 各ブラウザに対応させるためにベンダープレフィックスとうのをそれぞれつけています、基本形は一番下の行のものです all ですべての変化をアニメーションの対象にします。0.3sで0.3秒かけて変化します、さらに変化の具合も追加出来ますベジュ曲線で指定することもできるし、最初から準備されたアニメーションを指定する事もできます。また省略可能です。上のコードでは省略しています 省略している場合は初期値のeaseが使われます ease、ease-in、ease-out、linea
メニューをスキップして本文へ 旧ブログナビ (open/close)
単なる横並びのボックスも、アニメーションを少しつけるだけで目を引くものになります。スマートフォンやモダンブラウザのみがターゲットとなりますが、表示する時に順々にふんわりとしたアニメーションをつけて表示するサンプルをCSSのみで作ってみました。 CSS3 の animation プロパティを使用しているので、ベンダープレフィックスやキーフレームなども合わせるとコードが沢山になってしまいます。そこで、Sass を利用して簡単に書く方法も合わせてご紹介します。 完成サンプル 下のサンプルが完成形となります。「Return」をクリックするとアニメーションを再度開始します。 See the Pen 順にフワッと表示するCSS by Saomocari (@Saomocari) on CodePen. HTML コード HTML コードはシンプルなリストになります。順番に表示する要素が li になるの
2回続けてアニメーションネタですよ。こんに千葉。鹿児島からこんに千葉。 むかしこんな挨拶でスタートするAction Script BegenersっていうFashのサイトやってたのを思い出しました。 animate.cssの基本今回もアニメーションネタなんですが、animeta.cssを使いたいと思います。 animate.cssの使い方はいろんなサイトに掲載がありますので簡単に。 animate.cssをダウンロード html<link rel="stylesheet" href="css/animate.css"> <div class="animated shake">ブルブル</div>これだけで「ブルブル」という文字はブルブルします。 classのanimatedはそのままにしてshakeをbounceやflashなどにするとはねちゃったりチカチカしたりします。 これだけじゃツマ
制作途中など、リンクを張る予定だけどURLは決まっていないという時に、ダミーのa要素を作っておきたいことがある。というわけで、クリックしても何も起こらないダミーのa要素を3パターン書いてみた。 HTML5のプレースホルダー・リンク HTML5ではJavaScriptなどによって動的にリンク先を設定するケースを考慮し、a要素にhref属性が必須とされていないので、以下のような書き方ができる。href属性がないa要素を「プレースホルダー・リンク」と言う。ただし、ブラウザの標準スタイルでは文字色も下線もマウスポインタもデフォルトのままになるので、必要に応じて別途スタイル指定をする必要がある。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く