@keyframes move {
0%{
transform: translateY(90px);
/*我想问的是 90px 是针对整个盒子的最左上角开始算吗？ 是不是每个translate所说的方位都是以div的坐上角为起点？*/
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
/* <link href="style.css" rel="stylesheet" type="text/css"> */
<style>
@keyframes move {
0%{
transform: translateY(90px);
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:paused;
}
div:hover span {
animation-play-state:running; /*表示鼠标移到时才运动，此时是从上次暂停的地方开始*/
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
当div的宽度为200PX，span标签宽度为20px，时
transform: translateY(90px);处于中间位置， transform: translateY(90px);这方面不懂，可以倒回去看
8.4.CSS3中的变形--位移 translate()（移动）和
8.6.CSS3中的变形--原点 transform-origin（改变中心原点）
不是，是以命名模块的左上角为坐标原点（0， 0）。
示例是-webkit-animation-name: move;在span里，所以是以span左上角为基点，Y轴向下为正值，X轴向右为正值构建坐标系。和DIV无关和命名有关。