Animation

transition과 달리 키프레임 지정이 가능하며, 재생 횟수, 진행 방향, 정지 등 다양한 기능 제공

@keyframes

animation 효과를 사용하기 위한 규칙
from: 시작 지점
to: 끝 지점
percentage: 중간 단계 지점

@keyframes animation-name {
	from { /* 효과 */ }
    50% { /* 효과 */ }
    to { /* 효과 */ }
}

animation-duration

animation-naem와 함께 필수로 선언되어야 하는 속성으로
애니메이션의 진행 시간 지정

animation-name: fade;
animation-duration: 2s;

animation-iteration-count

애니메이션 재생 횟수

animation-iteration-count: 3;
animation-iteration-count: infinite;

animation-direction

애니메이션 진행 방향

/* 기본값, 순방향 진행 */
animation-direction: normal;
/* 역방향 진행 */
animation-direction: reverse;
/* 순방향 - 역방향 반복 > 리와인드. 반복 횟수 여러번 일 경우 사용 */
animation-direction: alternate;

animation-delay

애니메이션 실행 전 지연 시간 적용

animation-delay: 1s;

animation-timing-function

애니메이션 진행 속도의 변화

/* 같은 속도로 진행 */
animation-timing-function: linear;
/* 속도가 빨라지다가 느려진다 - 공 튀기기 */
animation-timing-function: ease-in-out;

animation-fill-mode

애니메이션 실행 전 후 효과 표시 여부 지정

/* 애니메이션의 마지막 상태 그대로 시작 */
animation-fill-mode: forwards;
/* 애니메이션의 마지막 상태를 가져와서 시작할 때 초기값으로 돌아온다 */
animation-fill-mode: backwards;
/* 애니메이션의 시작과 끝을 그대로 유지 */
animation-fill-mode: none;
/* forwards와 backwards 둘 다 적용 */
animation-fill-mode: both;

animation-play-state

애니메이션 재생 상태 제어

/* 기본값 - 진행된 상태 */
animation-play-state: running;
/* 정지된 상태 */
animation-play-state: paused;

animation

단축 표기
animation-name과 animation-duration은 필수속성
앞에 오는초 속성이 animation-duration으로 적용된다.

animation: fade 2s infinite 1s linear both;

애니메이션 효과 적용 예시

@keyframes shrink {
  0%, 100% { width: 100%; }
  50% { width: 50%; }
}
.case-02 .target-animation{
  animation: shrink 2s infinite ease-in-out both;
  animation-play-state: paused;
}

transition

요소의 회전, 크기, 기울이기, 이동효과 지정
키프레임 지정 불가능

transition-property

전이되는 과정 구현하는 속성
필수 속성

transition-property: all;

transition-property: background;

transition-duration

전이가 진행되는 시간
필수 속성

transition-duration: 3s;

transition-delay

전이되기 전 지연 시간

transition-delay: 2s'

transition-timing-function

전이 진행 속도 변화

transition-timing-function: ease-in-out;
/* n개의 정지 지점에 따라 전환 표시 */
/* jump-term: start, end, none - 전환 시작점 설정*/
transition-timing-function: steps(n, jump-term);
/* 그래프로 속도 변화 지정 */
transition-timing-function: cubic-bezier(0,1.59,1,-0.75);

transition

단축 표기

transition: all 3s ease-in 2s;

transition 효과 적용 예시

background: var(--pastel-lavender);
transition: all 200ms;

&:hover {
background: var(--pastel-orange);
border-radius: 50%;
rotate: 2turn;

transition: rotate 500ms;

효과

opacity

투명도 조절

/* 기본값 - 투명도 0 */
opaciry: 1;
/* 투명도 100 */
opacity: 0;

transform

이동

transform: translateX(20px);
transform: translateY(10px);

translate 20px 10px

rotate

회전

rotate: 1turn;
rotate: 180deg;

scale

확대

scale: 1 1;

perspective

원근감 - 뒤집기 효과에 사용
통상적으로 400px 사용

transform: perspective(400px) rotateY(360deg);

흔들림

translate 와 rotate 함께 사용

transform: translateX(0%) rotate(0deg);
transform: translateX(-15px) rotate(-5deg);

그림자 효과

box-shadow: 0 0 10px light-dark(rgb(0 0 0 /0.6), rgb(255 255 255 /0.6));

회전하는 빛 효과

요소 뒤에 회전하는 background-image로 gradient를 준다

@keyframes rotate {
  from {
    --rotation: 0deg;
  }
  to {
    --rotation: 360deg;
  }
}
@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.case-10 .target-animation {
  width: 150px;
  aspect-ratio: 1/1;
  position: relative;

  &::before, &::after{
    --rotation: 0deg;
    box-sizing: content-box;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 50%;
    translate: -50% -50%;
    background: conic-gradient(from var(--rotation), red, orange, yellow, green, blue, purple, red);
    padding: 1px;
    z-index: -1;
    border-radius: 8px;
    animation: rotate 1s infinite linear;
    animation-play-state: paused;
  }

  &::before{
    filter: blur(15px);
  }
}