[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>

<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>

1	<div id="test1">Test1</div>

参考サイト

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

サンプル

参考サイト

関連記事