webtips

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

body {
 animation: fadeIn 2s ease 0s 1 normal;
 -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

見出しなど一文字目を大きくしたり、色を変えたり。。。

html

<h1>大きな一文字目</h1>

CSS

h1 {
 font-size:20px;
}

h1:first-letter {
 font-size:50px;
 color:blue;
}

CSS

transform: rotate(10deg);

rotate()には回転する角度を指定