※트랜지션+트랜스폼과 애니메이션의 다른점
트랜지션+트랜스폼은 시작점과 끝점만 존재한다. 하지만 애니메이션은 시작점과 중간점, 끝점이 존재한다.
※애니메이션 구현 방법
1. 애니메이션 등록: @keyframes를 사용해서 등록한다.
@keyframes 애니메이션이름 {
0% { 스타일속성:스타일값; }
50% { 스타일속성:스타일값; }
100% { 스타일속성:스타일값; }
}
2. 애니메이션 적용: animation 스타일 속성을 사용해서 적용한다.
선택자 {
animation:애니메이션이름 진행시간 가속도 대기시간 반복횟수 방향지정;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션</title>
<style>
div {
width:300px; height:300px;
background:#06F;
/*2.애니메이션 적용*/
animation:firstAni 3s ease-in infinite alternate;
}
/*1.애니메이션 등록*/
@keyframes firstAni {
0% {transform:translate(0,0) rotate(0deg);}
50% {
border-radius:50%;
transform:translate(100px,0) rotate(90deg);
}
100% {transform:translate(500px,0) rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
결과
