웹사이트가 정적인것도 좋지만 전환되는 속성을 넣어줘서 역동적이고 재미있는 웹사이트를 만들 수 있다.
Animation 속성에 대해 알아보자.
Animation
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
Animation = hover나 onclick 같은 의사 클래스가 필요하지 않고 자동으로 시작한다. 애니메이션은 시작, 정지, 반복까지 제어할 수 있다.
Transition = 자동으로 시작하지 않고 hover나 onclick 같은 의사 클래스에 의해 동작한다. layout에 영향을 주는 요소의 크기나 위치가 변화하면 영향을 받는 모든 요소들의 크기나 위치를 재계산 하게 되는데 영향을 받는 요소들이 많을수록 많은 부하가 간다.
animation-delay
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
animation-delay: 3s; 이런식으로 사용하며 ms, s 단위로 작성하며 음수, 양수 모두 다 적용된다.
animation-direction
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
animation-duration
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
animation-duration: 3s; 이런식으로 사용하며 ms, s 단위로 작성하며 음수, 양수 모두 다 적용된다.
animation-iteration-count
애니메이션이 몇 번 반복될지 지정한다.
animation-name
애니메이션 적용 시키고자하는 요소에서 애니메이션 이름을 지정한다. @keyframes에서 애니메이션을 기재한다.
animation-name: 이름; 이런식으로 사용한다. 이름은 원하는대로 설정하면된다.
animation-play-state
애니메이션을 일시 정지 하거나 다시 시작할 수 있다.
일시 정지된 애니메이션을 다시 시작하면 일시 정지됬던 위치에서 애니메이션이 시작된다.
animation-timing-function
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
animation-timing-function은 <easing-function>을 사용한다.
<easing-function>easecubic-bezier(0.25, 0.1, 0.25, 1.0)linearcubic-bezier(0.0, 0.0, 1.0, 1.0)ease-incubic-bezier(0.42, 0, 1.0, 1.0)ease-outcubic-bezier(0, 0, 0.58, 1.0)ease-in-outcubic-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 )jump-start 대신 start로 사용할 수 있다.steps( 5, jump-end )jump-end 대신 end로 사용할 수 있다.jump-nonejump-bothsteps(1, jump-start)steps(1, jump-start) 대신 step-start로 사용할 수 있다.steps(1, jump-end)steps(1, jump-end) 대신 step-end로 사용할 수 있다.
animation-fill-mode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
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 |
animation-direction |
first relevant keyframe |
|---|---|
normal or alternate |
0% or from |
reverse or alternate-reverse |
100% or to |
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 {
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;
}
}
참고
