2016/10/10

リンクをジワ~っと変えるCSS

tags : /
a:link{
 color: #555555;
 transition: 1.0s;
}

a:hover{
 color: #005489;
}

CSS transition のプロパティ

CSS Transitions は transition 短縮プロパティで制御されます。これはパラメータのリストの長さが一致せず、CSS のデバッグに長い時間がかかってしまうことを簡単に防げますので、トランジションの設定を行うのに最善の方法です。
transition プロパティの各構成要素は、以下のサブプロパティで制御することができます:

transition-property
トランジションを適用する CSS プロパティの名前を指定します。ここに指定したプロパティだけが、トランジションによりアニメーションします。通常、それ以外のプロパティの変更は即座に反映されます。

transition-duration
トランジションの実行にかける所要時間を指定します。単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用されます。または複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができます。

transition-timing-function
トランジションの中間状態におけるプロパティの値の計算方法を定義する、3 次ベジェ曲線を指定します。

transition-delay
プロパティの変更とトランジションの実行が開始されるまでの待ち時間を定義します。


引用:

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

 

  • このエントリーをはてなブックマークに追加

Profoile

coralqualia
HaraYohei http://coralqualia.com/

当サイトの運営者。 ビジネスを成功へ導くため、「思いをカタチに変える」お手伝いをします。 印刷物、WEBサイトの制作はもちろん、その他なんでもご相談ください。 少しでもお客様のお役に立てればと思っております。 【Service】 ロゴ/販促ツール制作/パッケージ/誌面/各種広告制作/看板サイン/各種印刷 WEBサイト企画立案/Webデザイン/Webサイト制作/CMS(WordPress)構築/ECサイト構築/サーバー運用管理/サイト運営サポート イラスト/キャラクターデザイン Wechatを活用したサービスの提供 /中国でのWEBサイト構築・運営・販促活動