问题：
要使div沿水平或者竖直方向移动是很简单就能实现的，CSS animations 和 transitions 限制我们只能沿直线路径运动，但是如果想在两点间任意移动就很困难。
思路：
用 CSS （开启硬件加速）实现两点之间的运动，最直截了当的方式是使用 transform 的 translate 在一定时间内移动某个元素。这个时候看到的是沿着两点间运动，如果想要两点直线运动，就要将这个动画拆分为 x、y 轴。即每个轴单独执行自己的动画函数。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
#box{
width:500px; height:500px;
border: 1px solid;
position: relative;
}
.img {
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
left: 0px;
top: 0px;
animation-name: rightMove, bottomMove;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes rightMove{
50% {
animation-timing-function: linear;
left: 450px;
}
}
@keyframes bottomMove{
50% {
animation-timing-function: linear;
top: 450px;
}
}
</style>
</head>
<body>
<div id="box">
<div class='img'>
</div>
</div>
</body>
</html>
网友评论