How can I make flower animation? - animation

Question

How can I get this animation effect? I mean exacly this one:
I have to animate the image (I have every part of it in layers). What I should use? which way is the best?

Answer 1

i hope this can help,i use animation on load event using jQuery.
$( window ).on( "load", function() {
$('.main-section').toggleClass('animation-effect');
});
body {
margin: 0;
}
.main-section {
padding: 25px 0px 0 20px;
background-color: #d7f0f7;
}
.main-section .content {
max-width: 450px;
background-color: #d7f0f7;
transform: translateX(-500px);
transition: 0.8s;
}
.main-section .content .box {
height: 150px;
background-color: #e91e63;
margin-top: -15px;
transition: 0.5s;
width: 0;
}
.main-section .content .leaf {
padding-left: 100px;
}
.main-section .content .half-circle {
padding-left: 100px;
margin-top: -20px;
}
.main-section .content .half-circle-2 {
padding-left: 100px;
margin-top: -25px;
transform: rotate(-14deg);
}
.main-section .content .leaf img {
padding-left: 115px;
}
.main-section.animation-effect .content{
transform: translateX(0px);
transition: 1s;
}
.main-section.animation-effect .box {
width: 100%;
transition: 1s;
}
.main-section .content .half-circle img {
animation: rotate 3.5s infinite;
}
.main-section .content .leaf img {
animation: leaf-animation 3s infinite;
}
#keyframes rotate {
0% {
transform: rotate(-14deg);
}
50% {
transform: rotate(10deg);
}
100%
{
transform: rotate(-14deg);
}
}
#keyframes leaf-animation {
0% {
transform: rotate(0);
}
50% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="main-section">
<div class="content">
<div class="leaf">
<img src="https://i.ibb.co/fSQXHD5/leaf.png" alt="leaf" border="0">
</div>
<div class="half-circle">
<img src="https://i.ibb.co/xfmy6zS/half-1.png" alt="half-1" border="0">
</div>
<div class="half-circle-2">
<img src="https://i.ibb.co/CBdVwNC/half-2.png" alt="half-2" border="0">
</div>
<div class="box">
</div>
</div>
</div>