DOM
<body>
<div class="box">
<div class="img">
图片
</div>
</div>
</body>
CSS
<style>
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
.img {
width: 300px;
height: 300px;
background-color: red;
font-size: 24px;
line-height: 300px;
text-align: center;
position: absolute;
transform-origin: right center;
animation: animate 3s linear;/*使用动画*/
}
/*图片的运动动画*/
@keyframes animate {
from {
transform: scale(0);
left: -110%;
}
to {
transform: scale(1);
left: 0;
}
}
</style>
结果
