Untitled

<!DOCTYPE HTML>
<html>
<head>
    <title>Transitions & Animations</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }

    #animWrap {
        position: relative;
        width:960px;
        height:600px;
        background: rgb(100,150,200);
        margin: auto;
        overflow: hidden;
    }

    img{
        position: absolute;
    }
    #plane1{
        width:300px;
        right:-300px;
        top:200px;
        -webkit-transition:right 10s linear 3s, top 15s ease 3s;
    }

    #animWrap #cloud1 {
        width:400px;
        top:50px;
        left:50px;
        opacity: 0.9;
        -webkit-transition-property: left;
        -webkit-transition-duration: 10s;
        -webkit-transition-delay: 0s;
        -webkit-transition-timing-function:linear;

    }

    /* trigger */
    #animWrap:hover #cloud1{
        left:500px;
    }

    #animWrap:hover #plane1 {
        right:1000px;
        top:400px;
    }


    /**/

    </style>
</head>
<body>

<div id="animWrap">
    <img id="plane1" src="plane.png"/>
    <img id="cloud1" src="cloud.png"/>
</div>


</body>
</html>