CSS3 실습 7-6

SMALL

Animation 만들기

[Direction:]
Ÿ 다음 그림과 같이 ‘꽝!’ 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는
애니메이션을 작성하라. 단, 애니메이션은 무한 반복한다.

<!DOCTYPE html>
<html>
    <head>
        <title>전환</title>
        <style>
            @keyframes 꽝{
                from{font-size: 500%;}
                to{font-size: 100%;}
            }
            span:hover{
                animation-name: 꽝;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }
        </style>
    </head>
    <body>
        <span>꽝!</span>
    </body>
</html>