如何制作花卉动画？

Question

如何获得this的动画效果？我的意思就是这个：

我必须对图像进行动画处理（我将图像的每一部分都分层）。我应该使用什么？哪种方式最好？

Answer 1

我希望这会有所帮助，我使用 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>