ホバーしたときにテキストの傾きを変えたい
トランジションとは、要素が「いまの状態」から「次の状態」に変化するときに、その変化をなめらかにつなげることです。たとえば、<a>タグの通常時のスタイルとホバー時（:hover）のスタイルが適用しているとします。ホバー時のスタイルはopacityプロパティが設定してあって、マウスが重なったら<a>タグの要素の透明度が0.5（50%）になるようにしてあるとします。このとき、通常であればマウスホバーした瞬間<a>の要素の透明度が0.5になりますが、トランジションを使えば、だんだん透明にすることができます。さて、このトランジションの効果を適用するには、transitionプロパティを使用します。
transitionプロパティ
transitionプロパティは、原則として「変化前のスタイル」に適用します。セレクタが「a」のスタイルと、「a:hover」のスタイルがあるとしたら、「a」のスタイルのほうに適用するということです。transitionプロパティの書式は次の通りで、いくつかの設定項目を半角スペースで区切って並べます。
書式：transitionプロパティ
transition: ①対象のプロパティ ②時間 ③イージング ④ディレイ;これらの値の順序はこのとろりでなくてもかまいませんが、必ず（②）「時間」は、（④）ディレイよりも先に指定します。また、（②）時間以外は省略可能です。
①対象のプロパティ
トランジションの対象となるプロパティ名を指定します。変化前（セレクタが「nav li a」）と変化後（nav li a:hover）で、transformプロパティだけでなく、colorプロパティも変化しています。
書式：サンプルCSS
nav li a{
color: #000;
transform:rotate(-20deg);
transition: transform 0.3s linear;
}
nav li a:hover{
background: #d34547;
transform:rotate(0deg);
}transitionプロパティの「対象プロパティ」を指定すると、そのプロパティだけがトランジションの対象となります。このサンプルでは、対象のプロパティに「transfrom」を指定しているため、colorプロパティはトランジションせず、ホバーした瞬間に色が変わっています。もし、変化するすべてのプロパティをトランジションの対象にするなら、①の値を「all」にします。
書式：変化するすべてのプロパティをトランジションの対象にする
transition: all 0.3s linear;②時間
トランジションの経過時間を指定します。単位には「s（秒）」を使用します。
③イージング
イージングとは、変化するときの「緩急」のことです。最初はゆっくり変化して、あとから急激になる「イーズン（ease-in）」、その反対に、はじめは急激で、終わりが近づくにつれゆっくり変化する「イーズアウト（ease-out）」などあります。
イージングに使える主な値
| 値 | 説明 |
|---|---|
| linear | 一定の速度で変化する |
| ease-in | 最初ゆっくりで、だんだん急激に変化する |
| ease-out | 最初急激で、だんだんゆっくり変化する |
| ease-in-out | 最初と最後がゆっくりで、途中が急激に変化する |
| steps（段階） | 段階的に変化する。()内には段階数を数値で入れる |
| cubic-bezier() |
④ディレイ
トランジションが開始するまでの「遅れ」を指定します。単位には②「時間」と同様「ｓ（秒）」を使用します。
サンプル
このサンプルでは、ナビゲーションの傾いたリンクテキストをホバー時に0.3秒かけて元に戻します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>floatプロパティ</title>
<style>
body{
margin: 0;
}
nav{
border-top:8px solid #34589e;
background: #2a6fb7;
}
nav ul{
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
max-width: 1000px;
}
nav li{
box-sizing: border-box;
float: left;
border-bottom:1px solid #34589e;
width: 20%;
}
nav li:last-child{
border-right: none;
}
nav li a{
display: block;
width: 100%;
padding: 20px 0;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #ffffff;
transform:rotate(-20deg);
transition: transform 0.3s linear;
}
nav li a:hover{
background: #34589e;
transform:rotate(0deg);
}
nav li a.current{
background: #34589e;
}
</style>
</head>
<body>
<nav>
<ul id="localnav">
<li><a href="#">HOME</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">業務内容</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</nav>
</body>
</html>