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

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

• TEXT1

  hover text1

• TEXT2

  hover text2

• TEXT3

  hover text3