CSS 애니메이션_1

CSS 애니메이션 - 1

대표적으로 "transform", "transition", "@keyframes", "animation" 키워드가 있다.
CSS로 기초적인 애니메이션을 구현하는데 주로 사용하는 속성.

CSS 애니메이션의 속성은 블록 요소에 적용되는 것을 기본으로 한다.
블록 요소가 아닌 요소들은 블록 요소로 감싸서 블록 요소를 애니메이션 하는 것이 기본적인 사용법

Transform

요소를 이동하거나, 크기를 변경하는 요소의 크기, 위치, 색상 등의 속성 값을 바꾸는 동작을 하고, 시간 개념은 없다.

"transform" 속성은 요소의 속성을 변경하는 동작을 하지만, 트랜스폼 속성만으로는 시간 순서에 따르는 애니메이션이 일어나지는 않습니다.
변형이 적용된 결과만이 보여 지며, 시간 순서에 따른 애니메이션 효과를 적용하려면 시간 개념이 있는 "transition" 속성과 함께 사용해야 변형 속성 값이 애니메이션 시간 순서대로 표현됨.

transform 작성 방법

transform: translate(-200px, 200px) rotate(360deg);

Transition

시간 경과에 따라 하나의 속성 상태가 다른 속성상태로 변하는 것을 애니메이션으로 표현하는 것.

대상 요소의 변형(transform)되는 시간과 변화(transition)할 속성들을 함께 기술하며, 여러 개의 변형 속성이 한꺼번에 실행되도록 할 수 있다.

ex. 요소의 이동과 회전 2가지를 변형(transform) 속성으로 정의한 경우, 이동만, 회전만, 또는 이동과 회전을 모두 되도록 할 수 있다.

어떻게 변형되는지는 transform, @keyframes 블록에서 기술한다.
transition은 시간 순서에 따르는 순차적인 적용 단계와 방식을 표현하는 속성.

정해진 시간동안 지정한 속성 값이 순차적으로 변경되는 애니메이션을 구현할 때 "transition" 속성으로 구현할 수 있다.

transition: 속성 || 애니메이션시간 || 타이밍방식(변화방식) || 지연시간;

@keyframes

애니메이션에서 실제 동작 부분만을 따로 분리한 블록 표현이 키프레임이다.

@keyframes은 키프레임 애니메이션을 CSS와 분리해서 독립적인 제작 및 재사용을 할 수 있도록 해주는 키워드이다.

@keyframes heartbeat{
    to{
        transform: scale(1,3);
    }
}

이 키프레임 애니메이션은 대상 요소의 크기를 1.3배 키우는 애니메이션을 실행한다.

작성한 키프렘임 애니메이션 블록은 "@keyframes" 키워드 뒤에 추가한 이름 heartbeat을 이용해 CSS 클래스에서 애니메이션을 호출 할 수 있다.

미리 정의한 키프레임 애니메이션을 여러 CSS클래스에서 호출하면서 반복되는 같은 애니메이션을 여러 패턴으로 변경할 수 있다.

Animation

CSS 클래스에서 키프레임 애니메이션을 호출하는 속성은 "animation"이다.

animation 속성은 사용할 키프레임 애니메이션 이름과 함께 애니메이션의 재생시간, 반복 횟수, 애니메이션 방식, 지연시간 등 다양한 설정을 추가할 수 있다.

앞서 정의한 키프레임 애니메이션은 다음 코드처럼 키프레임 애니메이션을 적용할 요소를 위한 CS 클래스에 추가할 수 있다.

animation: heartbeat 1s 3 ease;

코드 설명 ease 커브 곡선을 따라 1초동안 실행("1s")되는 "heartbeat" 키프레임 애니메이션을 3회 반복하고 멈추는 애니메이션을 대상 요소에 적용한다는 의미.

요소와 동시에 적용되어 실행되는 변형 애니메이션의 재생시간과 애니메이션 방식만을 정할 수 있는transform+transition 과 달리
키프레임 애니메이션은 애니메이션을 시간 간격으로 나누어서 각각 다른 변형 속성 함수를 적용할 수 있다.

다음 코드처럼 시간대를 분리해서 다양한 변형 속성 함수를 적용할 수 있다.(%, from~to)

@keyframes heartbeat{
    0%{
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.3);
    }
    100%{
        transform: scale(1.0);
    }
}

@keyframes heartbeat2{
    from{
        transform: scale(1.0);
    }
    to{
        transform: scale(1.3) translate(10px, 10px)
    }
}
/* @keyframes 적용 예시 */
.box{
    animation: heartbeat2 2s ease;
}

키프레임 애니메이션 적용을 위한 "animation"속성은 훨씬 더 다양하고 많은 속성 값을 제공하기 때문에 더 풍부하고 강력한 애니메이션 기능을 구현할 수 있다.

infinite 속성 값을 추가하면 애니메이션이 무한 반복된다.

animation: heartbeat2 2s infinite ease;

기초 이동 애니메이션 구현하기

자바스크립트를 이용하여, codepen의 rerun을 클릭할 때마다 애니메이션이 동작하도록 설정.

See the Pen Untitled by JHKIMS (@jhkims) on CodePen.

오른쪽 아래로 200px씩 이동시키고 360도 회전시키는 변형을 작은 박스에 적용.

transform: translate(200px, 200px) rotate(360deg);

모든 속성 변경("all")을 1초("1s") 지연 후 1초("1s")동안 "ease" 방식으로 애니메이션함.

transition: all 1s ease 1s;

CSS 애니메이션 속성 이해하기

키프레임 애니메이션을 정의한 후,
요소에 애니메이션을 적용하려면,
animation 속성을 이용해 키프레임 애니메이션을 연결해야 한다.

CSS 애니메이션에서 사용할 수 있는 키프레임 애니메이션 속성은 다음 8개가 있다.
키프레임 애니메이션 전용 속성이므로 키프레임 애니메이션이 연결되지 않은 경우 적용되지 않는다.

속성	설명	속성 값
animation-name	키프레임 애니메이션 이름을 지정. 특수문자를 제외한 "문자열", "숫자", "-", "_"을 조합해 1글자 이상
animation-duration	애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간	0.3s, 1.5s, 300ms / 기본 값 0은 애니메이션 재생X
animation-timing-function	애니메이션 진행 속도, 또는가속 방식을 지정. 미리 설정된 속도 커브중 한가지를 선택.	Linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, startend) |cubic-bezier(n,n,n,n)
animation-delay	애니메이션 시작 지연 시간	미지정-지연 없이 즉시 애니메이션 시작 3s-3초 후 애니메이션 시작.
animation-direction	애니메이션 재생 방향	normal-정방향 재생 reverse-역방향 재생 alternate: 정방향과 역방향으로 한 번씩 번갈아 재생(정방향 시작) alternate-reverse: 역방향과 정방향으로 한 번씩 번갈아 재생(역방향 시작)
animation-iteration-count	애니메이션 반복 횟수 지정	양수: 정수 횟수 표기, 횟수만큼 애니메이션 반복 실행 후 정지 infinite: 무한 반복
animation-fill-mode	애니메이션 시작 전, 종류 후 적용할 CSS 스타일을 지정. "none"은 요소의 CSS 스타일을 유지하며, 그 외에는 키프레임 애니메이션의 CSS 스타일 유지함	none: 기본 값, 애니메이션 중이 아닌 경우, 요소의 CSS스타일을 유지함.  forwards: 애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지함. backwards: 애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지함.(지연 시간 포함) both: 애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지함. + 'none'과는 다름 / none과 backwards 속성 값은 애니메이션 중이 아닌 경우 다른 화면을 표시할 수 있으므로 주의해야 한다.
animation-play-state	애니메이션의 초기 실행 상태를 결정. 웹페이지 로딩 후 애니메이션을 자동 실행할 지 여부를 선택할 수 있음	paused: 애니메이션이 일시 중지된 상태 유지 running: 애니메이션이 재생중인 상태

단축형으로 애니메이션 속성을 모두 적용한 코드를 작성했다.
애니메이션 설명
: 애니메이션은 1초 지연 후 시작되며, 4초 동안 재생되고, 한 번 재생 후 반대 방향으로 3번 반복됩니다. 애니메이션이 끝난 후에도 마지막 상태를 유지합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>
@keyframes exampleAnimation {
  0% { transform: translateX(0); background-color: red; }
  50% { transform: translateX(100px); background-color: yellow; }
  100% { transform: translateX(0); background-color: red; }
}

.animatedElement {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 단축 표현으로 애니메이션 속성들 */
  animation: exampleAnimation 4s ease-in-out 1s 3 alternate forwards running;
}
</style>
</head>
<body>

<div class="animatedElement"></div>

</body>
</html>

코드에 대한 설명

1. animation-name: exampleAnimation - exampleAnimation 키프레임 애니메이션을 사용.
2. animation-duration: 4s - 4초 동안 재생.
3. animation-timing-function: ease-in-out - 애니메이션의 속도.
4. animation-delay: 1s - 1초 지연.
5. animation-iteration-count: 3 - 3번 반복.
6. animation-direction: alternate - 애니메이션이 한 번 재생된 후 반대 방향으로 재생.
7. animation-fill-mode: forwards - 애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지.
8. animation-play-state: running - 애니메이션이 실행 중.

 

*출처: HTML & CSS 마스터북