树叶的 CSS 动画图片（仿佛在风中飘扬）答案

【问题标题】：CSS animation image of leaf (as if blowing in the wind)树叶的 CSS 动画图片（仿佛在风中飘扬）
【发布时间】：2016-12-06 21:20:08
【问题描述】：

这是一个个人挑战，我对我在下面提出的方法感到相当满意，但我很想看看是否有任何替代方法。

我正在开发一个徽标包含叶子图像的网站。

我认为让叶子看起来像“被风吹”到它的最终徽标位置可能会很引人注目。

我想改进我编写的 CSS @keyframes 动画的第一个（非常基本的）版本：

@keyframes leafanimation {
     0% {transform:translate(900px,500px); color:rgba(255,0,0,0);}
    80% {transform:translate(0,0); color:rgba(255,0,0,0);}
   100% {transform:translate(0,0); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

<div class="my-logo">
My Logo
<div></div>
</div>

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

这是我（最终）使用一系列translate 和rotate CSS transforms 提出的解决方案：

@keyframes leafanimation {
         0% {transform:translate(900px,500px) rotate(0deg); color:rgba(255,0,0,0);}
        20% {transform:translate(850px,450px) rotate(360deg); color:rgba(255,0,0,0);}
        40% {transform:translate(450px,200px) rotate(720deg); color:rgba(255,0,0,0);}
        60% {transform:translate(100px,100px) rotate(1080deg); color:rgba(255,0,0,0);}
        80% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,0);}
       100% {transform:translate(0,0) rotate(1440deg); color:rgba(255,0,0,1);}
}

.my-logo {
position:absolute; 
top:0;
left:0;
height: 40px;
line-height: 40px;
font-size: 36px;
color: rgb(255,0,0);
animation: leafanimation 6s linear;
}

.my-logo div {
display: inline-block;
width: 20px;
height: 40px;
vertical-align: middle;
background-color: rgb(255,0,0);
border-radius: 20px;
}

<div class="my-logo">
My Logo
<div></div>
</div>

【讨论】：