애니메이션 실제로 적용해보기!

인덱스 스타일에 키프레임 서클쇼 0% ~ 100% 까지 입력해주자 그리고 트랜스폼 트랜스폼x축

0%에 0 100%에 움직이는 도착점 만큼 써주자

 

이렇게 써줬으면 서클에 animation: circleShow를 입력해줘야한다

 

    @keyframes circleShow {    

  0% {

    opacity: 0;

    transform: translateX(0px); x축으로 움직임

  }

  100% {

    opacity: 1; 투명도가 0에서 1로 증가

    transform: translateX(86px); 0제자리에서 오른쪽으로 86px만큼 움직임을 뜻함

  }

}

.circle {

        width: 246px;

        height: 246px;

        border-radius: 50%;

        position: absolute;

        animation: circleShow 0.5s; 서클에 이렇게 태그를 달아준다

    }

 

사실 제자리로 오는 효과를 주려면 트랜스레이트 수치를 예를들어 -86px 에서 0으로 해야 지정해둔 첫번째 위치로 오겠죠?

 

그런데 우리는 원이 동시에 나오는 효과가 아닌 하나씩 순차적으로 나오는 효과를 보여주고 싶다

전에 배웠듯이 애니메이션 딜레이 효과를 각각 원 마다 다르게 주면 가능하다!

 

animation-fill-mode: both; 이렇게줘야 처음부터 끝까지 자연스럽다 근데 인건 각각 개체에 다 써줘야 좀 더 자연스럽다고 한다

 

앞에 0% 부분에 백그라운드를 다른 색깔로 주는 것도 컬러풀한 풍성함을 나타낼 수 있다

 

텍스트가 한 줄씩 나타나게 작업해주기 ~

애니메이션 css 파일을 하나 더 만들어서 애니메이션 부모를 만들어주고 효과 주고싶은 코드에 이름을 삽입하는 작업을 해보자!

 

이름은 얼마줘도 중복해서 줘도 상관없으니 원래 부모이름 뒤에 한칸 띄우고 작성해주면 된다!

한줄 한줄 줘야 하기 때문에 br요소들은 다 지워줘도 되며 글말고 글을 꾸며주는 라인 같은것도 같은 줄의 글이면 빠뜨리지 말고 같이 div박스로 묶어줘야한다 조금 장황해 지지만 같은줄인 글 앞뒤로 div 박스만 만들어주고 클래스 이름만 잘 넣어주면 된다

 

.stagger-item:nth-child(1); 그리고 순차적으로 주기 위해서 애니메이션 css에 이렇게 스태커 아이템 nth-child도 만들어줘야 한다

 

이렇게 스태거 애니메이션 효과를 주기 앞서 미리 줘놨던 애니메이션 효과는 삭제해야 한다 

 

그리고 modal 창을 만들어 보려고 한다 썸네일 등을 클릭했을 때 나타나는 페이지라고 보면 된다!

마이 html을 그래도 복사해서 만들어놓은 my-modal.html에 복사해준다 그리고 애니메이션 속성은 다 지워준다~