HTML web2 19일차

HTML web2 19일차 - animation

Front-end/HTML

by 본투비곰손 2023. 6. 7. 22:32

728x90

animation

별도의 동작 조건없이 스스로 애니메이션 효과를 발생시키는 속성

1.사용방법

@keyframes 원하는이름{

%값{css속성}

}

선택자{animation:원하는이름 시간s 반복 횟수}

	<style>
		*{margin:0;padding:0;}
		
		div{width:400px;height:400px;
				background-color:red;
				animation:abc 3s 5;
				}
		
		@keyframes abc{
			50%{margin-left:300px}
		}
	</style>
</head>
<body>
	<div></div>
</body>

페이지를 출력하면 원하는시간을 %값으로 배분하여 5회 왕복 한다.

0%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 0초 돌아올때 10초//도착지부터 시작함)

20%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 2초 돌아올때 8초)

50%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 5초 돌아올때 5초)

80%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 8초 돌아올때 2초)

100%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 10초 돌아올때 0초//출발지로 바로이동)

사진 설명을 입력하세요.

2.animation-delay:시간s

입력해준 시간값 만큼 후 애니메이션이 실행된다.

3.animation-timing-function:

애니메이션 속도 효과 속성으로 transition과 옵션 효과가 같다.

a. linear : 시작과 끝이 일정한 속도로 유지하며 효과 발생

b. ease-out : 빠르게 시작해서 점점 느리게 끝이나는 효과 발생

c. ease(기본값) : 처음엔 느리게 중간은 빠르게 마지막은 다시 느리게 효과 발생

e. ease-in : 처음엔 느리게 중간부터는 조금씩 빠르게 효과 발생

f. ease-in-out : 처음엔 약간 느리게 중간에 빨라지다가 마지막엔 다시 약간 느리게

4.animation-fill-mode

animation-fill-mode 를 사용하면 원래대로 돌아가지 않고 상태가 계속 유지 된다.

a.animation-fill-mode:backwards

대상태그의 animation효과를 이미 적용된 상태에서 시작해주는 구문 *반드시 animation의 %값은 0%로 설정해준다.

	<style>
		*{margin:0;padding:0;}
		
		h1,h2,h3{text-align:center;
			 height:100px;}
		
		h1,h2,h3{animation:abc 5s;
			animation-fill-mode:backwards}
		
		h2{animation-delay:10s;}
		
		h3{animation-delay:12s;}
		
		@keyframes abc{
			0%{transform:translateY(100px);opacity:0;}
		}
	</style>
</head>
<body>
	<h1>안녕하세요 h1태그 입니다</h1>
	<h2>안녕하세요 h1태그 입니다</h2>
	<h3>안녕하세요 h1태그 입니다</h3>
	
</body>

b.animation-fill-mode:forwards

animation-fill-mode:backwards 와는 반대되는 효과로 대상태그의 animation효과가 적용 완료되면 되돌아가지 않는다.

*반드시 animation의 %값은 100%로 설정해준다.

	<style>
		h1{text-align:center;height:100px;
				background-color:blue;color:white;
				line-height:100px;
				animation:abc 3s;
				animation-fill-mode:forwards}
		
		@keyframes abc{
			100%{background-color:black;color:orange;
						transform:translateY(300px)}
		}
	</style>
</head>
<body>
	<h1>안녕하세요 h1태그 입니다</h1>
</body>

728x90

'Front-end > HTML' 카테고리의 다른 글

반응형웹(기본구조), 가변형 레이아웃 (0)	2023.06.16
HTML-web2-심화 학습- background (0)	2023.06.10
HTML web2 18일차 - table태그 (0)	2023.06.07
HTML web2 17일차 - 스프라이트이미지 (0)	2023.06.06
HTML web2 16일차 - transform (0)	2023.06.05