css3によるアニメーション
対応ブラウザ:Google Chrome,Safari
-webkit-transition: 時間 値;
-指定できる値-
linear:一定の速度で変化
ease:遅→速→遅いの変化
ease-in:遅→速の変化
ease-out:速→遅の変化
ease-in-out:easeがはっきりした変化
参考サイト:http://kachibito.net/web-design/css3-transition-sample.html
-角が丸くなる-
-webkit-transition: 1s ease-in-out;
:hover { -webkit-border-radius: 30px; }
-角が丸くなりborderも変化-
border: #ff8e00 10px solid;
-webkit-transition: 1s ease-in-out;
:hover {
-webkit-border-radius: 30px;
border: #ff8e00 10px dashed;
}
-ゆっくりと曲がる-
-webkit-transition: 1s ease-in-out;
:hover { -webkit-transform: skewY(-30deg); }
-360度回転-
-webkit-transition: 1s ease-in-out;
:hover { -webkit-transform: rotate(360deg); }
-10回転-
-webkit-transition: 7s ease-in-out;
:hover { -webkit-transform: rotate(3600deg); }
-影が出る-
-webkit-transition: 1s ease-in-out;
:hover { -webkit-box-shadow: 10px 5px 20px #ff8e00; }
-フォントが変わる-
-webkit-transition: 1s ease-in-out;
:hover { font-size: 30px; }
-フォントの色が変わる-
-webkit-transition: 1s ease-in-out;
:hover { color: #ff8e00; }
-フォントに影を付ける-
-webkit-transition: 1s ease-in-out;
:hover { text-shadow: 10px 5px 20px #ff8e00; }
-背景の幅や色を変える-
-webkit-transition: 1s ease-in-out;
width: 400px;
height: 170px;
:hover {
width:800px;
height:180px;
background-color: #ccc;
}
-分身する-
-webkit-transition: 1s ease-in-out;
text-align: center;
:hover {
text-shadow: 0 180px #ff343e,
0 -180px #ff34d2,
180px 0 #4234ff,
-180px 0 #efff34,
180px 180px #e1ddda,
180px -180px #ff7734,
-180px 180px #34ff39,
-180px -180px #32eaff;
}