<head>
<meta charset="utf-8">
<title></title>
<style>
div.t01{
position: relative
right: -100px;
width: 0px;
height: 5px;
background-color: yellow;
animation-name: boo;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
/* animation: boo 4s steps(); */
}
img{
width: 20px;
height: 20px;
}
@keyframes boo{
0%{}
100%{
width: 30%;
}
}
div.t02 {
position: absolute;
top: 8px;
right: 200px;
bottom: 200px;
width: 0px;
height: 5px;
background-color: yellow;
animation-name: boo1;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
/* animation: boo 4s steps(); */
}
@keyframes boo1{
0%{}
100%{
width: 30%;
}
}
.box3{
}
</style>
</head>
<body>
<div class="t01">
<img src="imgHdan.jpg">
</div>
<div class="t02">
<img src="imgHdan.jpg">
</div>
div.t01里加个text-align: right;
keyframes里面去改变t01的left，t02的right的值