728x90
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;
}
}
728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] nth-child (n번째부터 n번째까지 css적용) (0) | 2017.11.14 |
|---|---|
| [CSS] ch05-08. timingFunction (0) | 2017.08.28 |
| [CSS] ch05-07. transition2 (0) | 2017.08.28 |
| [CSS] ch05-06. transition (0) | 2017.08.28 |
| [CSS] ch05-04. skew (0) | 2017.08.28 |
댓글