여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - Animations
CSS – Animations
4개월전 작성
4개월전 수정

웹사이트가 정적인것도 좋지만 전환되는 속성을 넣어줘서 역동적이고 재미있는 웹사이트를 만들 수 있다.

Animation 속성에 대해 알아보자.

Animation

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

Animation = hover나 onclick 같은 의사 클래스가 필요하지 않고 자동으로 시작한다. 애니메이션은 시작, 정지, 반복까지 제어할 수 있다.

Transition = 자동으로 시작하지 않고 hover나 onclick 같은 의사 클래스에 의해 동작한다. layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가 간다.

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.

animation-delay: 3s; 이런식으로 사용하며 ms, s 단위로 작성하며 음수, 양수 모두 다 적용된다.

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.

속성 값
normal
:
순환할 때마다 시작 상태로 재설정되고 처음부터 다시 시작된다. 기본값.
reverse
:
순환할 때마다 종료 상태로 재설정되고 애니메이션 단계가 거꾸로 수행되고 타이밍 기능도 반대로된다. 예를 들어, ease-in 타이밍 이용시, ease-out으로 변경된다.
alternate
:
애니메이션이 계속 반복된다. 예를 들어, 처음엔 시작 상태로 재설정 되고 그 후엔 종료 상태로 재설정되는것이 반복된다.
alternate-reverse
:
애니메이션이 계속 반복된다. alternate와 다른점은 처음 시작할 때 종료 상태로 재설정되고 그 후엔 시작 상태로 재설정 되는것이 반복된다.

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-duration: 3s; 이런식으로 사용하며 ms, s 단위로 작성하며 음수, 양수 모두 다 적용된다.

animation-iteration-count

애니메이션이 몇 번 반복될지 지정한다.

속성 값
infinite
:
애니메이션이 무한 반복된다.
n
:
횟수를 숫자로 입력한다. 0.5 와 같이 소수점 단위도 사용이 가능하다. 음수값은 사용이 불가능하다. 기본값.

animation-name

애니메이션 적용 시키고자하는 요소에서 애니메이션 이름을 지정한다. @keyframes에서 애니메이션을 기재한다.

animation-name: 이름; 이런식으로 사용한다. 이름은 원하는대로 설정하면된다.

animation-play-state

애니메이션을 일시 정지 하거나 다시 시작할 수 있다.

일시 정지된 애니메이션을 다시 시작하면 일시 정지됬던 위치에서 애니메이션이 시작된다.

속성 값
running
:
애니메이션을 움직이게 한다. 기본값.
paused
:
애니메이션을 일시 정지 한다.

animation-timing-function

중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.

animation-timing-function은 <easing-function>을 사용한다.

<easing-function>
ease
:
천천히 시작해서 중간까지는 속도가 빨라지다가 다시 느려진다. 전환이 왕복으로 진행될 때 중간 지점까지 빨라진다. cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear
:
일정한 속도로 전환된다. cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in
:
천천히 시작해서 빨라진다. cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out
:
빠르게 시작해서 느려진다. cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out
:
천천히 시작해서 빨라지다가 다시 느려진다. 전환이 편도로 진행될 때 빨라지다가 다시 느려진다. cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier(.25,-0.25,.75,1.25)
:
일정한 속도로 전환되며 시작점과 종료점에서 약간 흔들린다. cubic-bezier(x1, y1, x2, y2)과 같이 3차원 베지어 곡선으로 값을 입력한다. x1, y1, x2, y2 값은 0부터 1 사이의 숫자를 입력한다.
steps( 5, jump-start )
:
transition-duration에 설정한 시간 길이 마다 5번 멈추고 시작점 다음부터 시작한다. jump-start 대신 start로 사용할 수 있다.
steps( 5, jump-end )
:
transition-duration에 설정한 시간 길이 마다 5번 멈추고 종료점 전까지만 전환한다. jump-end 대신 end로 사용할 수 있다.
jump-none
:
transition-duration에 설정한 시간 길이 마다 5번 멈춘다.
jump-both
:
transition-duration에 설정한 시간 길이 마다 5번 멈추고 시작점 다음부터 시작하고 끝점 전까지만 전환한다.
steps(1, jump-start)
:
종료점에 멈춰있다. steps(1, jump-start) 대신 step-start로 사용할 수 있다.
steps(1, jump-end)
:
시작점에 멈춰있다. steps(1, jump-end) 대신 step-end로 사용할 수 있다.
기본 예시
기다리면 전환되는것을 볼 수 있다.


animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

속성 값
none
:
애니메이션이 실행되지 않을 때 스타일을 적용하지 않는다. 기본값.
forwards
:
실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지한다. 마지막 키 프레임은 animation-direction및 animation-iteration-count의 값에 따라 다르다.

animation-direction animation-iteration-count last keyframe encountered
normal even or odd 100% or to
reverse even or odd 0% or from
alternate even 0% or from
alternate odd 100% or to
alternate-reverse even 100% or to
alternate-reverse odd 0% or from
backwards
:
대상에 적용되는 즉시 첫 번째 관련 keyframe 에 정의 된 값을 적용하고 animation-delay 동안 이 값을 유지한다. 첫 번째 관련 키프레임은 animation-direction의 값에 따라 다르다.

animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
both
:
앞뒤 양쪽 모두의 규칙을 따르기때문에 애니메이션 속성이 양방향으로 확장된다.

animation

위의 속성들을 하나로 축약하여 작성할 수 있다.

animation의 속성 값을 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation-timeline 순서로 기재한다.

keyframes

@keyframe 애니메이션 이름 { 애니메이션 지속시간 { CSS 스타일 } } 이런식으로 입력한다.

사용된 코드 설명
애니메이션 이름
:
animation-name에서 설정한 이름 입력한다.
애니메이션 지속 시간
:
0%~100%으로 입력 가능. 0% = from, 100% = to.
CSS 스타일
:
애니메이션으로 변경하려고 하는 CSS 스타일 입력한다.

코드

기본 예시
 

CSS
.animation {
width: 200px;
height: 200px;
border: 15px solid #000000;
background-image: url('이미지 URL');
background-position: top left;
animation: anima-test 5s infinite;
}

@keyframes anima-test {
50% {
background-position: bottom right;
border-top-color: #B2876F;
border-bottom-color: #B2876F;
}
}
HTML
사용된 코드 설명
border: 15px solid #000000;
:
테두리 두께 = 15px, 테두리 종류 = 실선, 테두리 색상 = 검정색.
background-image: url(‘이미지 URL’);
:
배경 이미지 추가한다.
background-position: top left;
:
배경 이미지 위치를 왼쪽 위쪽으로 설정한다.
animation: anima-test 5s infinite;
:
애니메이션 이름을 anima-test, 애니메이션 지속 시간은 5s 그리고 애니메이션 반복은 무한 반복되게 설정한다.
@keyframes anima-test
:
anima-test 라는 애니메이션에 대한 키프레임 지정한다.
50% { … }
:
애니메이션 지속 시간의 50% 정도 진행 됬을 때 어떤 CSS를 보여줄지 기재한다.
background-position: bottom right;
:
배경 이미지 위치를 오른쪽 아래쪽으로 설정한다.
border-top-color: #B2876F; border-bottom-color: #B2876F;
:
위쪽 테두리, 아래쪽 테두리 색상을 sendal로 설정한다.
참고
Mingg`s Diary
밍구
공부 목적 블로그