Я хочу, чтобы он переместился за определенное время, но он сделает это немедленно

Question

С кодом проблем нет. Я просто хочу установить время, чтобы он делал то, что он делает медленнее, но я не смог. Я просмотрел все в Интернете, но ничего не изменилось. Я не знаю почему, но время, которое я определил для перехода, не работает. Заранее всем спасибо

.last-img {

ширина: 70%;

высота: 70%;

shape-outside: многоугольник (0 0, 100% 0, 100% 100%, 0% 100%);

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

float: right;

переход: легкость входа-выхода 1 с; }

---

.last-img: hover {

ширина: 70%;

высота: 70%;

shape-outside: многоугольник (0 50%, 100% 100%, 100% 0);

clip-path: многоугольник (0 50%, 100% 100%, 100% 0);}

Answer 1

Пути должны иметь одинаковое количество вершин, чтобы их можно было анимировать плавно, а не дискретно. См., например , MDN

Этот упрощенный фрагмент перемещает четвертую вершину в ту же позицию, что и первая вершина.

Примечание. Когда вы наводите курсор на элемент, он меняет форму, и курсор может выйти за пределы формы, поэтому условие наведения удаляется. Это было очень заметно, когда две средние вершины изменили положение, как указано в коде вопроса. Для целей этой демонстрации две средние вершины не меняют положение.

Чтобы предотвратить эту проблему, вы можете ввести содержащий элемент и навести курсор на него, а не на саму фигуру.