反转悬停时的关键帧动画
这里有一个演示:
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);
}
}
每当您停止将鼠标悬停在元素上时,我希望反转keyframe
的效果。
仅使用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);
}
}
相关文章