这是一个演示:
http://codepen.io/Tiger0915/pen/GgjVLN
我在 .circle
div 的 hover
上有一个 keyframe
动画。当您将鼠标悬停在其上时,它可以正常工作。
@include keyframes(bounce-bulge) {
0% {
transform: scale(1);
}
20% {
transform: scale(.75);
}
80% {
transform: scale(1.75);
}
100% {
transform: scale(1.5);
}
}
.circle {
transition: all 300ms ease;
&:hover {
@include animation(bounce-bulge 500ms forwards);
}
}
每当您停止将鼠标悬停在元素上时,我想反转关键帧
的效果。
仅使用 CSS 就可以做到这一点吗?
最佳答案
看看我的例子,如果这是你想要的(有人会发明更优雅的解决方案)
http://codepen.io/Mardzis/pen/YPGmmq
CSS(SASS):
@include keyframes(bounce-bulge) {
0% {
transform: scale(1);
}
20% {
transform: scale(.75);
}
80% {
transform: scale(1.75);
}
100% {
transform: scale(1.5);
}
}
@include keyframes(bounce-bulge-back) {
100% {
transform: scale(1);
}
80% {
transform: scale(.75);
}
20% {
transform: scale(1.75);
}
0% {
transform: scale(1.5);
}
}
.circle {
margin: 100px auto 0;
width: 30px;
height: 30px;
border: 10px solid blue;
border-radius: 50%;
background: lightblue;
cursor: pointer;
transition: all 300ms ease;
@include animation(bounce-bulge-back 500ms forwards);
&:hover {
@include animation(bounce-bulge 500ms forwards);
}
}
关于css - 悬停时反转关键帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27710237/