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动画挥杆效果

回答

相关问题