HOME技術ウェブCSSで徐々に変化させるアニメーション効果をつける

CSSで徐々に変化させるアニメーション効果をつける

CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。

CSS3で実現

例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きます。

a{
transition:all 0.8s ease;
color:#000;
}
a:hover{
color:#fff;
}

transitionは時間的な変化を指定するCSS3のプロパティです。
本来は、
・transition-property(変化を適用するプロパティを,で指定。allですべてのプロパティ)
・transition-duration(変化が完了するまでの時間:1sで1秒)
・transition-timing-function(変化の進行割合)
・transition-delay(変化を開始する時間)
の4つのプロパティをまとめて指定するプロパティです。

この中で分かりにくいのはtransition-timimg-functionです。
これは、変化が起こる時間帯を、はじめの方に急激に起こすか、終わりの方に急激に起こすか、一定した変化にするか、といったことを決めるものです。
値には、
・ease(開始と官僚を滑らかに:初期値)
・linear(一定速度)
・ease-in(ゆっくり始まる)
・ease-out(ゆっくり終わる)
・ease-in-out(ゆっくり始まり、ゆっくり終わる)
・cubic-bezier(数値,数値,数値,数値)
があります。

上記の例ではtransition-delayは省略しています。
黒い文字が、マウスオーバーで徐々に白くなります。

関連記事

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む

FileZillaで文字化けして操作できないファイルを操作する

FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

CSSで画像の縦横比を保ったまま大きさを変えて表示する

縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む

JavaScriptでmailtoを偽装してメールアドレスを表示する

ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む

CSSで画面レイアウトをスマホ用とPC用とで分ける

CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。 画面の幅によって表示方法を切り替える スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む