在一定时间内移动答案

【问题标题】：Move Within a Certain Time在一定时间内移动
【发布时间】：2022-01-26 02:17:49
【问题描述】：

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

.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);
}

【问题讨论】：

能否请您详细说明代码：例如它做了什么，您之前尝试过什么，为什么需要延迟等等。这将有助于社区以最有效的方式回答您的问题。
我认为您可能需要两者具有相同数量的顶点才能获得流畅的动画效果。见developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
@AHaworth 谢谢。它们是动画。无论如何我都试过了。不工作。谢谢
@taylor.2317 我添加了下面的代码。我希望它像本文中动画形状标题下的三角形。 html5rocks.com/en/tutorials/shapes/getting-started
@usul93 太好了，它会帮助其他人:)

标签： html css transition clip-path shape-outside

【解决方案1】：

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

这个简化的 sn-p 将第四个顶点转换到与第一个顶点相同的位置。

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

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

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>

【讨论】：