14_keyframes 애니메이션
CSS에서 움직이는 동작을 표현하기 위해 transition, keyframes 속성을 사용
transition 속성은 마우스 오버에의한 동작으로 애니메이션을 구현, keyframes 속성은 마우스 동작에 의하지 않고, 자동으로 움직이도록 할 수 있다는 차이점이 있음
작성법
@keyframes 애니메이션 이름 지정{
0% {실행 할 서식} = form{실행 할 서식}
100% {실행 할 서식} = to{실행 할 서식}
}
- animation-name: 적용 할 애니메이션 이름 지정
- animation-duration : 애니메이션 시간 설정
- animation-iteration-count : 애니메이션 반복 횟수
- animation-delay : 애니메이션 지연 시간 설정