如何使我的图片动起来
HTML和CSS的新功能。谁能教我如何将我的图片从当前位置动画化到另一个位置？例如，从“顶部：280像素：左侧600像素”移动；至顶部：180px；左500像素；”
需要有人指导我，谢谢。下面是我当前的程序：
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
</style>
<body>
<img id="robot" src="pic_8.PNG">
<?php
?>
</body>
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
要实现图片从一个位置平滑移动到另一个位置的动画效果，你可以使用CSS3中的transition和transform属性，或者使用@keyframes来创建动画。这里我将向你展示如何使用这两种方法来实现你的需求。
方法1：使用transform和transition
/* 图片初始位置 */
.my-image {
position: absolute;
top: 280px;
left: 600px;
transition: all 0.5s ease; /* 过渡效果设置，0.5秒完成，动画类型为ease */
}
/* 鼠标悬停或其他触发方式改变位置 */
.my-image:hover {
transform: translate(100px, -100px); /* 水平向左移动100px，垂直向上移动100px */
}
这段代码中，当你把鼠标悬停在图片上时（.my-image:hover），图片会根据transform: translate(100px, -100px);的设置平滑地移动。这里的移动距离是相对于自身当前位置进行的，所以你需要根据实际需要调整这两个值，以确保它能从“顶部：280像素；左侧：600像素”移动到“顶部：180px；左：500像素”。
方法2：使用@keyframes创建动画
如果你希望控制动画的每一帧，可以使用@keyframes规则。
.my-image {
position: absolute;
top: 280px;
left: 600px;
animation: moveImage 2s ease forwards; /* 动画名称、持续时间、速度曲线、是否只播放一次 */
}
@keyframes moveImage {
from {
top: 280px;
left: 600px;
}
to {
top: 180px;
left: 500px;
}
}
在这个例子中，我们定义了一个名为moveImage的动画，它会在2秒内完成从起始位置到结束位置的过渡，并且使用了ease作为动画的速度曲线，forwards表示动画结束后保持最后一个关键帧的位置。
请根据你的具体需求选择合适的方法，并将上述代码片段应用到你的项目中。记得替换.my-image为你图片元素的实际类名或ID。
