CSS animation

See the Pen animation by nilgi (@nilgi) on CodePen.

 

javascript가 없어도 css만으로 애니메니션을 만들 수 있다.

 

.anibox {
animation-name: abox; / 애니메이션 이름을 지정
animation-duration: 7s; / 애니메이션 길이(초)
}

@keyframes abox { / 키프레임은 애니메이션의 기본. 위에 지정한 이름.
form { / 시작
background: tomato; / 배경 토마토
}
to { / 끝 
background: gold; / 배경 골드
}
}

배경색이 토마토에서 골드색으로 변하는 애니메이션