Move Within a Certain Time-CodePudding

There is no problem with the code. I want to set a time for it to do what it's doing (more slowly), but I haven't been able to. I've looked at everything on the internet but nothing has changed. I don't know why, but the time I defined in transition doesn't work.

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

CodePudding user response：

The paths have to have the same number of vertices to be animatable smoothly rather than discretely. See for example MDN

This simplified snippet transitions the fourth vertex to the same position as the first vertex.

Note - as you hover on the element it changes shape and the cursor may go outside the shape - so the hover condition is removed. This was very noticable when the two middle vertices changed position, as given in the code in the question. For the purposes of this demo, the two middle vertices do not change position.

To prevent this problem you could bring in a containing element and have the hover on that rather than on the shape itself.

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 >
</div>

CodePudding user response：

As I said in the question. The code works but I want it to do it slowly.

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

<p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae
        ducimus dolores omnis laborum eveniet velit nam doloremque, repellat
        ipsum eligendi perspiciatis sequi esse eaque aliquid optio vero.
        Voluptatibus distinctio officiis ducimus quaerat temporibus nisi nam,
        fuga alias eaque enim adipisci, dicta suscipit iusto at quidem commodi
        debitis! Animi recusandae, veritatis laboriosam dolor doloribus mollitia
        ipsam exercitationem nulla voluptas voluptatum rem dolore culpa deserunt
        consequatur minus facere itaque! Sint cupiditate temporibus, sit maxime
        natus officiis soluta reprehenderit dolore neque, vero, consequatur
        voluptas voluptates laborum aspernatur minima. Fugiat fugit qui,
        perferendis repudiandae maxime illum officia unde. Itaque reprehenderit
        minima fugit totam minus! Lorem ipsum dolor sit, amet consectetur
        adipisicing elit.
        <img
          
          src="https://wallpaperaccess.com/full/3636092.jpg"
          alt="bla bla bla bla"
        />
        Excepturi hic qui perferendis pariatur illum! Repudiandae unde delectus
        commodi quibusdam ducimus molestias, at doloribus quisquam perspiciatis
        nesciunt dolores, laborum labore exercitationem repellendus eos? Minus
        culpa architecto commodi debitis quaerat inventore cumque eveniet dicta
        vitae rem dignissimos harum ipsa voluptatum similique, repellendus nam
        corporis necessitatibus omnis corrupti iure exercitationem magnam ipsum!
        Provident laudantium asperiores rem delectus doloremque iste sit ad
        pariatur. Sed optio ab dolorem rerum saepe, totam doloremque iste dolor
        blanditiis, temporibus alias placeat quis. Dignissimos doloremque labore
        suscipit, exercitationem quam ab minima quas hic voluptatem numquam
        asperiores aliquid excepturi molestiae perferendis assumenda, aspernatur
        voluptates dolor ipsum qui velit consequatur. Enim soluta nostrum nihil
        reiciendis magnam nam minus consectetur quasi voluptates doloremque!
        Molestiae culpa, esse itaque similique consequuntur, aliquam, est
        repudiandae dolore commodi harum illo repellendus fugit sunt ipsa!
        Labore, distinctio vero ipsam accusantium porro natus dignissimos
        sapiente itaque illum odio adipisci quia iure voluptatum maiores odit
        quas, nemo maxime aut unde quo! Deleniti doloremque minus eum quia fugit
        iste dicta praesentium quos libero, illo porro eius! Animi explicabo
        sunt provident quasi saepe repellat? Incidunt autem quidem iusto
        voluptatum dolore architecto similique quis asperiores id, tempora
        possimus quia porro, laboriosam minima!
      </p>