●トップ > 勉強中 > HTML5+CSS3 > ２回目　マウスオーバーで変わる -transition-

２回目　マウスオーバーで変わる -transition-

2014-11-14

transition:再生時間　プロパティ　補間方法　ディレイ

｛transition:再生時間　プロパティ　補間方法　ディレイ｝

個別表示

・再生時間　 transition-duretion
・プロパティ transition-property
・補間方法 transition-timing-function
・ディレイ transition-delay

補間方法

・ease 最初と最後を滑らかに変化
・linear 一定の速度で変化
・ease-in 最初をゆっくり変化
・ease-out 最後をゆっくり変化
・ease-in-out 最初と最後をゆっくり変化

角を丸く

© 引用サイト⇒nemuchan.comさまサイトより

--[ html ]-----------------------

<div class="anime01"></div>

--[ CSS ]------------------------

.anime01{
	background:#003d84;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}
複数のプロパティを同時に変更

■リンクを貼ってみました

--[ html ]-----------------------
<div id="anime06"><a href="/contact/">お問い合わせはこちら</a></div>

--[ CSS ]------------------------
★背景色とテキスト色と幅が1秒で変化するCSS

div#anime06 {
	background-color: #003d84;
	width: 150px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div#anime06 a{
        color: #fff;
}

div#anime06:hover{
	background-color: #ffeb00;
	color: #000;
	width: 300px;
}

div#anime06 a:hover{
	color: #000;
}