CSS/transitionプロパティ

transition-property	どのプロパティにアニメーションを適用するか指定するプロパティ
trantion-duration	アニメーション開始から終了までの所要時間を指定するプロパティ
transition-timing-function	アニメーションのイージングを指定するプロパティ
transition-delay	アニメーションが開始するまでの遅延時間を指定するプロパティ

property

all
background

duration

0.5s
2s

timing-function

ease

ease-in

ease-out

cubic-bezier

delay

sample1

s1Div

sample1code

#s1Div {
	width: 100px;
	height: 50px;
	background: purple;
	transition: width 0.2s ease-in 0.5s,
				height 0.2s linear 1s,
				background 0.2s ease-out 1.5s,
				color 0.2s linear 2.0s;
}
#s1Div:hover {
	transition: width 0.2s ease-in 0.5s,
				height 0.2s linear 1s,
				background 0.2s ease-out 1.5s,
				color 0.2s linear 2.0s;
	width: 200px;
	height: 100px;
	background: blue;
	color: red;
}

sample2

s2Div

s2P

sample2code

#s2Div {
	width: 100px;
	height: 50px;
	background: black;
	color: white;
	overflow: hidden;
	transition: 0.5s,
}
#s2Div p {
	margin-top: 30px;
	transition: 0.5s;
}
#s2Div:hover p{
	transition: margin-top 0.2s ease-in 1s;
	margin-top: 0px;
}