Rotate a vignette over an image-CodePudding

My page:

I have failed to make this egg shape image frame to rotate slowly. The image itself is fixed. Only the vignette should be rotating. Could you help me?

CodePudding user response：

you need to use @keyframe for making infinite rotating effect, because transition animate only between 2 states, example [here][1] without rotate but idea is there

  [1]: https://codepen.io/Zerhogi/pen/dyzojXw

.n-spin-container {
  width: 300px;
  height: 500px;
  transition: border-radius 1s ease-out;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: rotate 5s linear infinite;
  overflow: hidden;
}

@keyframes rotate {
  0%{
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  20%{
    border-radius: 60% 30% 70% 40% / 60% 40% 70% 30%;
  }
  40%{
    border-radius: 70% 40% 80% 50% / 70% 50% 80% 40%;
  }
  60%{
    border-radius: 80% 50% 90% 60% / 80% 80% 90% 50%;
  }
  80%{
    border-radius: 90% 60% 100% 70% / 90% 70% 100% 60%;
  }
  100%{
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

<figure class="n-spin-container wp-block-image size-full"><img loading="lazy" width="390" height="500" src="https://galina.xyz/wp-content/uploads/2019/10/neve-food-mag-20.jpg" alt="" class="wp-image-68"></figure>