[CSS] ch05-09. ani

09_ani.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>

<style>
    @import "../css/09_ani.css";
</style>
</head>

<body>
<div id="myball"></div>
</body>
</html>

 

 

09_ani.css

@CHARSET "UTF-8";
#myball{
    position: relative;
    width:100px;
    height:100px;
    border-radius: 50px;
    border:2px solid black;
    background:url(../img/f1.png) no-repeat center center padding-box;
    animation:myani 3s infinite alternate;
}
@keyframes myani{
    0%{
        left: 10px;
    }
    50%{
        background:url(../img/woman.png) no-repeat center center;
    }
    100%{
        background:url(../img/f2.png) no-repeat center center;
        left:500px;
    }
}