[Day 19] CSS - 애니메이션(animation) 속성

1. 애니메이션(animation) 속성 : 자바스크립트 사용하지 않고도 웹 요소에 애니메이션을 추가 가능 키프레임(keyframe)?

: 에니메이션 중간에 스타일이 바뀌는 지점, @keyframes 속성으로 정의. animation의 속성 1)~7) 1) @keyframes : 애니메이션이 바뀌는 지점 설정 @keyframes <이름> { <선택자> {<스타일>} } 2) animation-name : 이름 사용해서 애니메이션 구별 animation-name: <키프레임 이름> | none 1)2) 사용 예) ...(생략)...

...(중략)...

#redbox { background-color: red; border: 1px solid blue; animation-name: tocircle; /* 애니메이션 이름 지정 */ animation-duration: 5s; /* 애니메이션 실행 시간 */ } @keyframes tocircle { /* shape 애니메이션...