端くれプログラマの備忘録 CSS [CSS] 基本メモ: アニメーション (transition)

[CSS] 基本メモ: アニメーション (transition)

サンプル

<style>
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid orangered;
    transition: background-color 2s linear 0, height 2s ease-in-out 0;
}
div:hover {
    height: 200px;
    background-color: red;
}
</style>
<div id="test1">Test1</div>

参考サイト

transition-CSS3リファレンス
http://www.htmq.com/css3/transition.shtml