[SH FILM/CSS] (@keyframe - fade in) 글자 나타내기 애니메이션

아 디자인 전체적으로 너무 맘에 안드는디

SH 로고 밑 서브 텍스트가 고정되어 있어서 너무 심심해보임

 

뭔가 페이지에 처음 접속했을 때 저 서브 텍스트가

서서히 나타났으면 좋겠다.

---

animation.css 파일에 해당 코드를 집어 넣을 건데,

animation 효과는 재탕할 예정이므로 class 이름을 fadeIn으로 지정해주겠다.

 

1. @keyframes (+ @-webkit-keyframes)

keyframes을 이용해 opacity값을 설정해주어 fadeIn 효과를 지정해주겠다.

opacity값이 0이면 텍스트가 보이지 않는다고 생각하면 되고,

값이 1이면 텍스트가 나타나는 것이라고 생각하면 된다.

 

일단 난 크롬 브라우저를 이용하고 있으므로 webkit keyframes를 추가로 지정해주겠다.

다른 브라우저를 위한 키프레임은 나중에 추가하도록 하겠다.

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

 

2. fadeIn 효과 지정

아까 html 파일에서 해당 부분의 class name을 fadeIn으로 지정하였는데,

여기에서 animation 속성을 fadeIn 2s값으로 지정해주겠다.

효과 시간을 3s로 지정했었는데 너무 느려서 좀 그것보다 빨리 나타나주면 좋겠다고 생각했다.

그래서 2s로 지정했음

 

webkit animation도 같이 지정해주자.

 

.fadeIn {
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;

}

---

최종적으로 이렇게 나타난다.

 

쫘좐