개발

이미지 애니메이션 본문

Frontend/HTML5, CSS

이미지 애니메이션

Study 2021. 3. 2. 18:16

 

 

 

 

 

 

 

상기 이미지처럼 회전하는 애니메이션 효과를 CSS로 적용해보도록 하겠습니다! 

 

 

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
#ball{
    animation-name: ball-rotate;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay:0ms;
    animation-timing-function: linear;
}
@keyframes ball-rotate{
    from{transform: rotate(0deg);}
    to{transform: rotate(720deg);}    
}
</style>
</head>
<body>
    <img id="ball" src="돌려버릴 이미지 주소" alt="회전 회오리">
</body>
</html>
 cs

 

@keyframes ball-rotate{

    from{transform: rotate(0deg);}

    to{transform: rotate(720deg);}    

}

 

애니메이션을 시작점과 끝나는점을 지정하여 만들어주고

 

효과를 위에서 

    animation-name: ball-rotate;

    animation-duration: 8s;

    animation-iteration-count: infinite;

    animation-delay:0ms;

    animation-timing-function: linear;

 

8초에 2바퀴

회전 무제한 반복

회전을 마친 후 딜레이

가속도 없이 공평한 속도로 회전.

옵션입니다.

'Frontend > HTML5, CSS' 카테고리의 다른 글

border-radius 모서리 굴곡도, object-fit: cover 원본비율 유지  (0) 2021.03.04
div style 레이아웃 개념정리  (0) 2021.03.02
HTML 태그 모음  (0) 2021.02.27
'Frontend/HTML5, CSS' Related Articles more