在一定时间内移动

Question

代码没有问题。我想设置一个时间让它做它正在做的事情（更慢），但我没能做到。我查看了互联网上的所有内容，但没有任何改变。不知道为什么，我在transition中定义的时间不起作用

.last-img {
  width: 70%;
  height: 70%;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  float: right;
  transition: ease-in-out 1s;
}

/* -------------------------------------------  */

.last-img:hover {
  width: 70%;
  height: 70%;
  shape-outside: polygon(0 50%, 100% 100%, 100% 0);
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

Answer 1

路径必须具有相同数量的顶点才能平滑而不是离散地设置动画。例如参见 [=12=]

此简化代码段将第四个顶点过渡到与第一个顶点相同的位置。

注意 - 当您将鼠标悬停在元素上时，它会改变形状并且光标可能会超出形状 - 因此悬停条件被移除。当两个中间顶点改变位置时，这一点非常明显，如问题中的代码所示。出于本演示的目的，中间的两个顶点不会改变位置。

为防止出现此问题，您可以引入一个包含元素并将鼠标悬停在该元素上而不是形状本身上。

body {
  width: 100vw;
  height: 100vh;
}

.last-img {
  width: 70%;
  height: 70%;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  float: right;
  transition: ease-in-out 1s;
  background-color: pink;
}

.last-img:hover {
  width: 70%;
  height: 70%;
  shape-outside: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 50%);
}

<div class="last-img">
</div>

在一定时间内移动

Move Within a Certain Time

html

css

transition

clip-path

shape-outside