CSS動畫搖曳的窗簾

我有一個客戶想要在他的入口頁面上打開窗簾，但他們不能是Flash動畫，並且動畫GIF文件太大。所以我創建了一系列在mouseover上用CSS動畫打開的窗簾。基本的動畫是這裏http://www.nightwingsgraphics.com/Curtains/CurtainsTEST.html CSS動畫搖曳的窗簾

然而，由於它們看起來更像門（太硬），當他們打開，我這裏補充一個微微顫動http://www.nightwingsgraphics.com/Curtains/SwayTEST.html 有所好轉，但仍然過於生硬，而且我丟失到哪裏或如何添加某種「翹曲」（或變形）效果，使它們看起來更自然。

任何幫助將不勝感激。

PS：我還創建了兩個版本的jsfiddle，但它不是讓我在這裏發佈超過2個鏈接:(

來源

2015-06-19 user3721068

嗯，我還以爲我的帖子沒有「包括所期望的行爲」（添加翹曲或變形效果的窗簾，使開放運動看起來更自然）和「具體問題」（在哪裏或如何添加這個效果），但顯然我還不夠清楚。 :( – user3721068

可以使用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); 
}

另請參閱我che 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縮短代碼

來源

2015-06-19 07:12:45

這絕對是一個很好的開始，幫助我指出正確的方向。非常感謝！謝謝！ – user3721068

CSS動畫搖曳的窗簾

回答

相關問題