WEBの便利ツール CSS アニメーション ジェネレーター

CSSコード

.tran {
	-moz-transition: all 0.5s ease 0s ;
	-webkit-transition: all 0.5s ease 0s ;
	-o-transition: all 0.5s ease 0s ;
	-ms-transition: all 0.5s ease 0s ;
}
.box {
	width:200px;
	height:100px;
	background-color:#000000;
	color:white;
	text-align:center;
}

.box:hover {
	width:400px;
	height:200px;
	background-color:#ffffff;
	color:black;
	border-radius:10px;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
}

HTMLコード

<div class="box gra">あいうえお</div>