CSS動畫（搖）

-2

我試圖添加動畫到我的HTML使用CSS。由於某種原因，它無法正常工作。任何幫助是極大的讚賞。CSS動畫（搖）

謝謝

CSS -

.shake { 
    -webkit-animation: shake 1.5s; 
    -moz-animation: shake 1.5s; 
    -ms-animation: shake 1.5s; 
    animation: shake 1.5s; 
}

JS -

$(document).ready(function() { 
    $('.button1').click(function() { 
     $('.compFist').addClass('shake'); 

    }); 
});

來源

2015-01-05 Renay

似乎像你還沒有在CSS中對'shake'動畫進行罰款...... – AlexZ

'shake'不是默認的動畫類型 - 您需要定義幀。我建議使用一個已經爲你做了這個樣式表，因爲這是一項艱鉅的任務：http://elrumordelaluz.github.io/csshake/ –

你可能需要一個緩動類型，比如緩動支撐，此外，它不適用於所有瀏覽器？ – atmd

您需要添加下面的CSS：

@keyframes shake { 
 
    0% { 
 
    transform: translate(0px, 0px) rotate(0deg); } 
 
    2% { 
 
    transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 
 
    4% { 
 
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 
 
    6% { 
 
    transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 
 
    8% { 
 
    transform: translate(0.5px, -0.5px) rotate(-0.5deg); } 
 
    10% { 
 
    transform: translate(2.5px, 2.5px) rotate(-0.5deg); } 
 
    12% { 
 
    transform: translate(2.5px, 0.5px) rotate(-0.5deg); } 
 
    14% { 
 
    transform: translate(2.5px, 0.5px) rotate(-0.5deg); } 
 
    16% { 
 
    transform: translate(2.5px, -0.5px) rotate(1.5deg); } 
 
    18% { 
 
    transform: translate(2.5px, 2.5px) rotate(0.5deg); } 
 
    20% { 
 
    transform: translate(2.5px, 2.5px) rotate(0.5deg); } 
 
    22% { 
 
    transform: translate(2.5px, 2.5px) rotate(0.5deg); } 
 
    24% { 
 
    transform: translate(1.5px, -0.5px) rotate(-0.5deg); } 
 
    26% { 
 
    transform: translate(1.5px, 1.5px) rotate(1.5deg); } 
 
    28% { 
 
    transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 
 
    30% { 
 
    transform: translate(2.5px, 1.5px) rotate(0.5deg); } 
 
    32% { 
 
    transform: translate(2.5px, 2.5px) rotate(1.5deg); } 
 
    34% { 
 
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 
 
    36% { 
 
    transform: translate(2.5px, -1.5px) rotate(-0.5deg); } 
 
    38% { 
 
    transform: translate(1.5px, 0.5px) rotate(-0.5deg); } 
 
    40% { 
 
    transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 
 
    42% { 
 
    transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 
 
    44% { 
 
    transform: translate(-0.5px, 1.5px) rotate(1.5deg); } 
 
    46% { 
 
    transform: translate(0.5px, -0.5px) rotate(0.5deg); } 
 
    48% { 
 
    transform: translate(-0.5px, 1.5px) rotate(1.5deg); } 
 
    50% { 
 
    transform: translate(2.5px, 1.5px) rotate(1.5deg); } 
 
    52% { 
 
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 
 
    54% { 
 
    transform: translate(2.5px, 1.5px) rotate(0.5deg); } 
 
    56% { 
 
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 
 
    58% { 
 
    transform: translate(1.5px, 2.5px) rotate(0.5deg); } 
 
    60% { 
 
    transform: translate(1.5px, -1.5px) rotate(-0.5deg); } 
 
    62% { 
 
    transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 
 
    64% { 
 
    transform: translate(1.5px, 2.5px) rotate(0.5deg); } 
 
    66% { 
 
    transform: translate(-1.5px, -0.5px) rotate(1.5deg); } 
 
    68% { 
 
    transform: translate(0.5px, -1.5px) rotate(1.5deg); } 
 
    70% { 
 
    transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 
 
    72% { 
 
    transform: translate(1.5px, 1.5px) rotate(1.5deg); } 
 
    74% { 
 
    transform: translate(1.5px, -0.5px) rotate(1.5deg); } 
 
    76% { 
 
    transform: translate(0.5px, 0.5px) rotate(-0.5deg); } 
 
    78% { 
 
    transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 
 
    80% { 
 
    transform: translate(-1.5px, 0.5px) rotate(1.5deg); } 
 
    82% { 
 
    transform: translate(1.5px, -1.5px) rotate(-0.5deg); } 
 
    84% { 
 
    transform: translate(2.5px, -0.5px) rotate(-0.5deg); } 
 
    86% { 
 
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg); } 
 
    88% { 
 
    transform: translate(-1.5px, 2.5px) rotate(0.5deg); } 
 
    90% { 
 
    transform: translate(2.5px, 0.5px) rotate(1.5deg); } 
 
    92% { 
 
    transform: translate(0.5px, -1.5px) rotate(1.5deg); } 
 
    94% { 
 
    transform: translate(-0.5px, 2.5px) rotate(-0.5deg); } 
 
    96% { 
 
    transform: translate(0.5px, 1.5px) rotate(0.5deg); } 
 
    98% { 
 
    transform: translate(1.5px, -1.5px) rotate(1.5deg); } }

來源

2015-01-05 11:17:12

大聲笑，這是可愛的，但你可以減少到4或5指示，然後將動畫填充模式設置爲兩者。 – FLX

我試着添加這個，它不起作用。 – Renay

-1

試試這個

Fiddle Demo

@keyframes thumb { 
    0% { transform: scale(1); } 
    50% {transform: scale(0.9); } 
    100% { transform: scale(1); } 
} 

.shake:hover 
{ 
    animation-name: thumb; 
    animation-duration: 200ms; 
    transform-origin:50% 50%; 
    animation-iteration-count: 2; 
    animation-timing-function: linear; 
} 

.shake 
{ 
    cursor:pointer; 
}

來源

2015-01-05 11:41:34

嘗試了演示，但沒有奏效。 – Renay

它將工作在圖像懸停，嘗試 –

是的，演示沒有工作！ –

您必須添加瀏覽器的支持，使其在Chrome瀏覽器和Firefox：

@keyframes thumb { 
    0% { transform: scale(1); } 
    50% {transform: scale(0.9); } 
    100% { transform: scale(1); } 
} 
@-webkit-keyframes thumb { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(0.9); } 
    100% { -webkit-transform: scale(1); } 
} 

.shake:hover 
{ 
    -webkit-animation-name: thumb; 
    animation-name: thumb; 
    -webkit-animation-duration: 200ms; 
    animation-duration: 200ms; 
    -webkit-transform-origin:50% 50%; 
    transform-origin:50% 50%; 
    -webkit-animation-iteration-count: 2; 
    animation-iteration-count: 2; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
} 

.shake 
{ 
    cursor:pointer; 
}

來源

2015-01-05 12:25:00 Jonte

CSS動畫（搖）

回答

相關問題