本文介绍了反转悬停时的关键帧动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里有一个演示：
http://codepen.io/Tiger0915/pen/GgjVLN
我在.circlediv的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);
}
}
这篇关于反转悬停时的关键帧动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！