[CSS] CSS Animation

1. CSS Animation

animation ? 특정 지점 별로 애니메이션 효과를

적용할 때 사용합니다.

.animation {
            width: 300px;
            height: 300px;
            background-color: yellow;
            animation-name: changeWidth;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-delay: 1s;
            animation-iteration-count: 6;
            animation-direction: alternate;
        }

 

속성값들을 한 줄로 표현할 수 있습니다.

.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
}

 

values

• animation-name : 애니메이션 이름을 지정
• animation-duration : 애니메이션이 한 사이클을 완료하는데 걸리는 시간
• animation-timing-function : 애니메이션이 진행되는 방식
  
  • linear: 일정한 속도를 유지
  • ease-in-out: 속도가 빨라졌다가 느려진다
  • animation-timing-function의 다른 options
• animation-delay : 애니메이션 지연 시간
• animation-iteration-count : 애니메이션 반복 횟수
• animation-direction : 애니메이션 진행 방향
  • alternate : from - to - from
  • normal : from - to, from - to ...
  • reverse : to - from, to - from ...

---

2. keyframes

from { } 에 설정한 스타일에서 시작해서 to { } 에 설정한 스타일로 animation-name에 지정된 애니메이션 효과를 적용한다.

@keyframes `animation-name` {
            from {
                width: 300px;
            }

            to {
                width: 600px;
            }
        }

 

---

2024.01.08 Elice week - 01 review

강의 링크: <https://swtrack.elice.io/courses/84757/lectures/667394/lecturepages/7410900