Animations

<!DOCTYPE html>
<html>
<head>
    <style>
        img{
            width:20%;
            display:block;
            position: relative;
            margin-bottom: 500px;
        }
        #transformation{
            transform:skew(30deg, 10deg) scale(2.0, 2.0) rotate(30deg);
        }
        #transition{
            transition: opacity 1s ease-in 0s, width 1s ease-in 0s;
        }
        #transition:hover{
            opacity: 0.7;
            width:30%;
        }
        #animation:active{
            -webkit-animation: myKey 10s ease-in-out 0.2s infinite alternate;
        }
        @-webkit-keyframes myKey{
            0%{background: lightblue; margin-left: 0px}
            25%{background: orange; margin-left: 200px;}
            50%{background: yellow; margin-left: 200px; margin-top: 200px;}
            75%{background: green; margin-left: 0px; margin-top: 200px;}
            100%{background: brown; margin-left: 0px; margin-top: 200px;}
        }
        #all{
            transform:skew(30deg, 10deg) scale(1.2, 1.2) rotate(30deg);
            transition: width 1s ease-in 0s;
        }
        #all:hover{
            width: 30%;
            -webkit-animation: myKey 10s ease-in-out 0.2s infinite alternate;
        }
    </style>
</head>
<body>
    <img src="b.png" id = "original" /> Original

    <img src="b.png" id = "transformation" /> transformation
    <img src="b.png" id = "transition" /> transition
    <img src="b.png" id = "animation" /> animation

    <img src="b.png" id = "all" />
</body>
</html>