按钮摇摆动画
在焦点上创建一个摇摆动画。
- 使用适当的
transition
来动画化元素的变化。 - 使用
:focus
伪类来应用一个使用transform
使元素摇摆的animation
。 - 使用
animation-iteration-count
来仅播放一次动画。
<button class="button-swing">提交</button>
.button-swing {
color: #65b5f6;
background-color: transparent;
border: 1px solid #65b5f6;
border-radius: 4px;
padding: 0 16px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.button-swing:focus {
animation: swing 1s ease;
animation-iteration-count: 1;
}
@keyframes swing {
15% {
transform: translateX(5px);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(3px);
}
65% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
}