css 애니메이션 여러 예제

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            border-radius: 100px;
        }
        img:hover {
            animation-duration: 2s;
            animation-name: myani4;
        }
        @keyframes myani {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
        @keyframes myani2 {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
        @keyframes myani3 {
            from {
                width: 200px;
                height: 200px;
                border-radius: 100px;
            }
            to {
                width: 500px;
                height: 500px;
                border-radius: 250px;
            }
        }
        @keyframes myani4 {
            from {
                margin-left: 0;
            }
            to {
                margin-left: 500px;
            }
        }
    </style>
</head>
<body>
<img src="http://lorempixel.com/200/200">
</body>
</html>