[CSS 활용]fade in/out animation배경 이미지가 서서히 나타나게 하기

이미지나 배경화면이 서서히 나타나게 하기

이미지(배경화면) 서서히 나타나게 하기

이미지가 첫 화면에서 자연스럽게 나타나게 되면 부드러운 느낌을 준다.
배경뿐만 아니라 다양한 요소 (폰트/이미지) 에서도 쓰일 수 있는 fadein / fadeout 애니메이션이다. 
CSS animation을 활용!
 
 

 

HTML 마크업

<div id="main">
	<img src="https://images.unsplash.com/photo-1627328714377-dd9f50ebc7d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=701&q=80" alt="">
</div>

 
 

CSS

#main {
width: 100%; 
margin:0 auto;
animation: fadein 5s ease 3s;
  -webkit-animation: fadein 3s; /* Safari and Chrome */
}
#main img{
  width: 100%;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

 

결과

아래 Result를 눌러서 확인 해 주세요!

 
 
 
 
 

참고 사이트

 
CSS 애니메이션 속성 좀더 자세히 보기
https://www.w3schools.com/css/css3_animations.asp 

CSS Animations