CSS擺動/搖動效果

我打算做的效果： - 晃動幾下，停止擺動。定期做這種行爲，直到鼠標懸停。在懸停時，擺動完全停止。 -all轉換順利。我嘗試使用-webkit-animation關鍵幀，但使用-webkit-animation-timing-function來緩解鼠標懸停時的過渡不起作用。此外，我失去了如何實現以下動作：擺動，停止，並再次擺動。如果您能指出正確的方向，我將不勝感激。CSS擺動/搖動效果

來源

2016-06-30 Sangam Chouchan

查看「Animate.css」，它是Dan Eden創建的動畫CSS框架。 Craig Dennis使用jquery插件擴展了該框架，使您可以輕鬆配合動畫之間的明星/停止鉤子和延遲。一起使用這兩個應該可以讓你實現擺動/停止/擺動一些你想要的功能。 –

animate.css實際上非常好，並且提供了很大的靈活性。我可能只是研究他們的代碼來獲得基本原則。謝謝！ –

請嘗試以下之一：

.class:hover { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
}

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

或添加到您的腳本：<link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

和A類添加到您想動搖

元素完整文檔在這裏：https://elrumordelaluz.github.io/csshake/

來源

2016-06-30 20:33:55

這是一個簡單的擺動動畫，當你將鼠標懸停在它上面時會停止。

爲了實現擺動之間的延遲，您可以包含動畫的「空塊」......即沒有任何變化的時段。在我的例子中，0％到80％之間沒有任何變化，而「擺動」只發生在最後的20％（最終達到半秒）。

@keyframes wiggle { 
 
    0% { transform: rotate(0deg); } 
 
    80% { transform: rotate(0deg); } 
 
    85% { transform: rotate(5deg); } 
 
    95% { transform: rotate(-5deg); } 
 
    100% { transform: rotate(0deg); } 
 
} 
 

 
h1.wiggle { 
 
    display: inline-block; 
 
    animation: wiggle 2.5s infinite; 
 
} 
 

 
h1.wiggle:hover { 
 
    animation: none; 
 
}

<h1 class="wiggle"> 
 
    wiggle, wiggle 
 
</h1>

不幸的是，這並不能解釋「寬鬆」回到未搖搖晃晃的狀態，如果你年年動畫在它懸停。這樣做可能需要一些JavaScript。

來源

2016-06-30 20:49:18

謝謝！它仍然解決了我的問題的一部分，它控制着動畫的週期性。我認爲CSS將足以緩解動畫。你會怎麼做的JavaScript？ –

@SangamChouchan我認爲CSS也足夠了。我認爲向'h1.wiggle'類中添加'transition：0.5s'會導致它緩解掉動畫，但它似乎並不奏效。我現在正在試驗一個javascript解決方案。 –

CSS擺動/搖動效果

回答

相關問題