원 움직임 애니메이션 효과 (css-keyframes)

html and css

하이바네 2021. 5. 10. 14:17

css에서 animation이라는 속성을 사용하면 keyframes를 적용할 수 있다.

keyframes에서는 각 프레임마다 어떤 변화가 있을지 적으면 되는데, 아래는 서서히 커졌다가 작아지는 keyframes를 작성한 것이다.

<code>

@keyframes icon-line{

0%{width:60px; height:60px}

60%{width:80px; height:80px;}

100%{width:44px; height:44px;}

}

</code>

아래는 keyframes를 적용한 원 크기와 text의 opacity를 바꿔 애니메이션을 표현한 css이다.

영역1

728x90