to
-
Animations, 애니메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 4. 04:40
이번시간에는 hover state 아니더라도, 변화가 계속 나타나길 원할 때, 즉, rotate를 반복하고 싶을 때 사용할 수 있는 애니메이션, animation을 배워보도록 하겠습니다. 저번시간과 다르게, 애니메이션을 만들기 위해서는 CSS에게 애니메이션을 생성했다는 것을 알려 주는 @keyframes, 키프레임을 작성해야 됩니다. 그런 다음, 애니메이션의 이름을 적어 줍니다. 예를 들어, 이름을 scaleAndRotateSquare라고 하겠습니다. 애니메이션은 2단계, (1) from, (2)to가 필요합니다. 예를 들어, (1) from, 어디서부터, 트랜스포메이션, 변형이 없는 상태에서, from{ transfrom: none; } (2) to, 여기까지, 트랜스포메이션, 변형이 회전 1바퀴, 사..