CSS动画摇曳窗帘[关闭]

【问题标题】：CSS animation swaying curtains [closed]CSS动画摇曳窗帘[关闭]
【发布时间】：2015-06-19 15:12:45
【问题描述】：

我有一位客户希望在他的入口页面上打开窗帘，但它们不能是 Flash 动画，而且动画 gif 的文件太大。所以我创建了一组在鼠标悬停时以 CSS 动画打开的窗帘。基础动画在这里http://www.nightwingsgraphics.com/Curtains/CurtainsTEST.html

但是，由于它们在打开时看起来更像门（太硬），所以我在这里添加了一个轻微的摇摆动作http://www.nightwingsgraphics.com/Curtains/SwayTEST.html 稍微好一点，但仍然太僵硬，我不知道在哪里或如何添加某种“变形”（或变形）效果以使它们看起来更自然。

任何帮助将不胜感激。

PS：我还为这两个版本创建了一个 jsfiddle，但它不允许我在这里发布超过 2 个链接:(

【问题讨论】：

好吧，我认为我的帖子确实“包含了所需的行为”（在窗帘上添加翘曲或变形效果，使打开的动作看起来更自然）和“具体问题”（在哪里或如何添加这个效果），但显然我不够清楚。 :(
动画窗帘：codepen.io/TimLamber/pen/jEmEaP

标签： css animation

【解决方案1】：

您可以像这样使用skew() 转换

#axis:hover .move-right{
    transform: translate(215px,0) scaleX(0.2) skew(-15deg, 5deg);
}

#axis:hover .move-left{
    transform: translate(-215px,0) scaleX(0.2) skew(15deg, -5deg);
}

还看到我把 translate 的值改成了因为它是在应用 skew() 函数时从容器中出来的

使用cubic-bezier 函数来改善过渡

.object {
   transition: all 3s cubic-bezier(0.42,0.1,0.44,0.95);    
}

我推荐你在这个页面上玩http://cubic-bezier.com/

也可以在这里查看我的问题的答案：How to add physics to CSS animations?

我希望这至少可以指导您。

PD：我省略了vendor-prefixed 以缩短代码

【讨论】：

这绝对是一个很好的开始，可以帮助我指明正确的方向。非常感激！谢谢！