2022.01.13(Thu.) <CSS를 이용한 애니메이션의 표현>

animation: 오타를 찾는 흔들리는 나의 눈빛 1s ease-in-out infinite

1. 문제의 발단

CSS로도 라이브러리를 쓰지 않더라도 간단하게 애니메이션을 표현할 수 있다. flex-box를 어느 정도 사용하게 되고 나니, 이제 자연스럽게 애니메이션을 이용해 css를 활용해보려는 욕심이 났다. 그래서 움직임과 관련한 속성들을 전부 정리해 보려고 한다.

2. transform

• 위치 값이나 크기 등을 변환시킬 수 있다.
• scale(크기), skew(기울어짐), rotate(회전), translate(위치 이동), perspective(3D), matrix(perspective를 제외하고 앞의 모든 속성을 다 적용시킴)의 속성들을 사용할 수 있다.
• 각 속성들은 단위와 함께 적어서 변화를 줄 수 있다. 그리고 속성 뒤에 X, Y를 붙이면 축에 따른 변화도 가능하다.

3.  transition

• 얼마나 오랜 시간 동안 애니메이션을 재생시킬 것인가를 정한다.
• 그래서 뒤에 시간이 온다. (ex: 2s, 2000ms 등 )
• ease(기본값, 천천히 시작해서 빨라졌다가 다시 느리게 끝), ease-in(시작이 느림), ease-out(끝이 느림), ease-in-out(느리게 시작해서 느리게 끝), linear(전부 동일한 속도)의 속성들도 사용할 수 있다. 이후 시간 단위도 붙여도 된다. 그 시간 안에서 지정한 방식의 속도를 가진다.

4. @keyframes

• 애니메이션을 새부적으로 시간의 지남에 따라 만들어 줄 수 있다.

.box{
	animation: Ghost 1s ease-all infinite;
    // 설정한 애니메이션을 animation 속성으로 적용시킨다.
}

@keyframes Ghost {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

• 위의 속성을 넣으면 처음 시작할 때에는 안 보이며, 30% 진행 후 생겼다가 60%만큼까지 유지되면서 마지막에는 다시 천천히 사라지게 될 것이다.

기준이 되는 선이 어디인지 혹은, 부드러운 움직임 등을 구현해 직접 사용하는 것이 가장 빠른 적응 방법이다. 코드만 봐서는 잘 모른다. 스크롤 유도 아이콘이나 BOX를 이용한 움직임으로 연습하면 될 것 같다.