[CSS] Animation (@keyframes)
@keyframes는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다. < html lang = "ko" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > < style > #rectangle { width : 100px ; height : 100px ; background : red ; position : absolute ; animation : move 5s infinite ; //한줄에 속성을 여러개 작성할 수 있다. animation-direction : alternate ; } @keyframes move { from { top : 0px ; opacity : 0 ; } to { top : 200px ; opacity : 1 ; } } </ style > </ head > < body > < div id = "rectangle" ></ div > </ body > </ html > 해당코드를 복사하여 창에 띄어보면 빨간색 네모 상자가