[CSS] div 위로 올라오는 애니메이션 효과

 

 

 

페이지 실행시 해당 요소가 아래에서 위로 올라오는 애니메이션을 CSS로 구현합니다.

 

Content

 

 

 

1. CSS

 

.content { position: relative; animation: fade_up 1s; }
@keyframes fade_up {
	0% { opacity: 0; transform: translateY(100%); }
	to { opacity: 1; transform: translateY(0); }
}

 

 

 

2. HTML

 

<div class="content">Content</div>