CSS3 animation사용해서 360도로 회전하는 버튼만들기

나는 마우스오버했을 때 버튼이 돌아가는걸 만들었다.

서론 필요없고 소스부터

#chatBtn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: url("/images/btn_chat.png") no-repeat center #9736e5;
}
#chatBtn:hover {
	background-color: #A13AF5;
	-webkit-animation:spin 3s linear infinite;
	-moz-animation:spin 3s linear infinite;
	animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

infinite속성은 끊임없이 반복하기위함

한번만 돌게하려면 infinite는 빼면된다

아래는 적용한 예제임