CSS動畫揮杆效果

我發現了這個非常有趣的CSS動畫效果。但是，我的知識還不足以找到問題的可能性。如果有人能幫助我，我會非常感激。提前致謝。CSS動畫揮杆效果

PS：我的想法非常簡單，當你懸停div開始擺動。

@-webkit-keyframes swing { 
 
    20% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
 
    transform: rotate3d(0, 0, 1, 15deg); 
 
    } 
 

 
    40% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
 
    transform: rotate3d(0, 0, 1, -10deg); 
 
    } 
 

 
    60% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
 
    transform: rotate3d(0, 0, 1, 5deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg); 
 
    transform: rotate3d(0, 0, 1, -5deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 
} 
 

 
@keyframes swing { 
 
    20% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
 
    transform: rotate3d(0, 0, 1, 15deg); 
 
    } 
 

 
    40% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
 
    transform: rotate3d(0, 0, 1, -10deg); 
 
    } 
 

 
    60% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
 
    transform: rotate3d(0, 0, 1, 5deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg); 
 
    transform: rotate3d(0, 0, 1, -5deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 
} 
 

 
.swing { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 

 
.swing:hover{ 
 
    -webkit-transform-origin: top center; 
 
    transform-origin: top center; 
 
    -webkit-animation-name: swing; 
 
    animation-name: swing; 
 
}

<div class="swing"></div>

來源

2016-03-20 George Stoqnov

你的問題是什麼？「爲什麼這不起作用」還遠遠不夠。 – Jon

看起來你只是錯過了動畫持續時間：

@-webkit-keyframes swing { 
 
    20% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
 
    transform: rotate3d(0, 0, 1, 15deg); 
 
    } 
 

 
    40% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
 
    transform: rotate3d(0, 0, 1, -10deg); 
 
    } 
 

 
    60% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
 
    transform: rotate3d(0, 0, 1, 5deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg); 
 
    transform: rotate3d(0, 0, 1, -5deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 
} 
 

 
@keyframes swing { 
 
    20% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg); 
 
    transform: rotate3d(0, 0, 1, 15deg); 
 
    } 
 

 
    40% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg); 
 
    transform: rotate3d(0, 0, 1, -10deg); 
 
    } 
 

 
    60% { 
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg); 
 
    transform: rotate3d(0, 0, 1, 5deg); 
 
    } 
 

 
    80% { 
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg); 
 
    transform: rotate3d(0, 0, 1, -5deg); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg); 
 
    transform: rotate3d(0, 0, 1, 0deg); 
 
    } 
 
} 
 

 
.swing { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 

 
.swing:hover{ 
 
    -webkit-transform-origin: top center; 
 
    transform-origin: top center; 
 
    -webkit-animation-name: swing; 
 
    animation-name: swing; 
 
    animation-duration: 1s; 
 
}

<div class="swing"></div>

MDN doc for animation-duration

或者你可以通過使用animation shorthand property來簡化一下。

.swing:hover{ 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    animation: swing 1s; 
}

來源

2016-03-20 22:41:19 apaul

感謝您的快速響應和您的幫助。我真的很感謝！ –

CSS動畫揮杆效果

回答

相關問題