Issue
My page: https://galina.xyz/makiyazh/oshibki-pri-makiyazhe/
HTML:
<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>
CSS:
.n-spin-container {
width: 100%;
height: 100%;
transition: border-radius 1s ease-out;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
I have failed to make this egg shape image frame to rotate slowly. The image itself is fixed. Only the vignette should be rotating. What can try next?
Solution
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>
Answered By - Zerhogi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.