[ animation ] 애니매이션:반복적인 패턴의 움직임
- animation은 반드시 @keyframes과 같이 써야함
animation
코드보기 [더보기] 선택
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0227_css3_animation</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/* [ animation ] */
.animation{width: 100px; height: 100px;
background-color: darkblue;
animation-name: animation; /* @keyframes에서 지정한 이름*/
animation-duration:4s; /*소요 시간 지정 */
animation-iteration-count: 3; /*반복 횟수 지정 */
}
@keyframes animation{
from{background-color: darkblue}
to{background-color: lightblue }
}
</style>
</head>
<body>
<h3> [ animation ] 애니매이션:반복적인 패턴의 움직임</h3>
<h4>- animation은 반드시 @keyframes과 같이 써야함</h4>
<div class="animation">animation </div>
</body>
</html>
