animationとtransitionのサンプル

animation サンプル1

アニメーション実行後そのままの位置でとどまる。

#box01 div {
	animation-duration: 3s;
	animation-name: animation01;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-fill-mode: both;
}

@keyframes animation01 {
	from {
		left: 0;
	}
	20% {
		left: 300px;
	}
	70% {
		left: 300px;
		background-color: #939;
	}
	to {
		left: 600px;
		background-color: #939;
	}
}

animation サンプル2

赤い四角にオンマウスしたら動く、終わるかオレンジの枠内のオンマウスをやめると元の位置に戻る

#box02:hover div {
	animation-duration: 3s;
	animation-name: animation01;
	animation-timing-function: ease-in;
	animation-delay: 1s;
}

@keyframes animation01 {
	from {
		left: 0;
	}
	20% {
		left: 300px;
	}
	70% {
		left: 300px;
		background-color: #939;
	}
	to {
		left: 600px;
		background-color: #939;
	}
}

transition サンプル1

#box03 div {
	position: relative;
	top: 0;
	left: 0;
	background: green;
	transition-property: all;
	transition-duration: 3s;
	transition-timing-function: linear;
	transition-delay: 0;
}

#box03:hover div {
	left: 600px;
}

transition サンプル2

移動しながら、色が変わる。

#box04 div {
	position: relative;
	top: 0;
	left: 0;
	background: black;
	transition: background-color 1s linear 0s,left 1s linear 0s;
}

#box04:hover div {
	left: 600px;
	background-color: #0CC;
}

transition サンプル3

delayを使って変化のタイミングをずらす。移動したあとに、色が変わる。

#box05 div {
	position: relative;
	top: 0;
	left: 0;
	background: #F9F;
	transition: background-color 3s linear 1s,left 1s linear 0s;
}

#box05:hover div {
	left: 600px;
	background-color: #0CC;
}