<style>태그에 keframes "스타일시트명" 을 이용해 내가 사용할 애니메이션 효과를 만든다.
이번에 해볼 것은 시간이 지남에 %가 바뀌어 배경색을 바꾸는 것과,
transform:translate(x,y); 로 해당 태그 위치 좌표를 바꾸는 것이다.
이러한 샘플 애니메이션 효과를 적용시킨 p 태그의 스타일로
animation-name : (적용할 애니메이션 이름) 에는 내가 만들 sample 애니메이션 효과를 적으면되고
animation-duration : 에는 적용될 시간을 작성하면 되고
animation-fill-mode : 에는 수행 뒤에 하게 될 내용을 쓰면 되는데,
이러한 형식들은 검색을 활용해 여러가지를 적용해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 -2</title>
<style type="text/css">
@keyframes sample{ /* 애니메이션 프레임 sample(이름)*/
0% {background: lightpink; transform:translate(0,0);}
50% {background: lightgreen; transform:translate(70px,30px);}
100% {background: red; transform:translate(0,0);}
}
p {
width: 100px;
height: 100px;
background: lightpink;
padding: 10px;
/* 밖 여백 : margin 안 여백 padding */
animation-name: sample; /*이름*/
animation-duration: 10s; /*시간*/
animation-fill-mode: forwards; /*따로 지정하지 않으면 기본값으로 돌아옴*/
}
</style>
</head>
<body>
<p>애니메이션</p>
</body>
</html>
수행내용
'개발자노트 > 웹' 카테고리의 다른 글
| HTML 외부 Script [JS] 불러오기 (0) | 2022.07.25 |
|---|---|
| Html - 외부 폰트 사용하기 (0) | 2022.07.22 |
| Html - 애니메이션 효과 (text-decoration , transition) (0) | 2022.07.22 |
| 웹 크롤링 - Jsoup을 이용한 ( CGV ) 크롤링 (0) | 2022.07.22 |
| Html - 긴 문장 스크롤 처리 하기 ( overflow-x, y ) (회원가입 약관동의) (0) | 2022.07.22 |
