这是一个演示:
http://codepen.io/Tiger0915/pen/GgjVLN http://codepen.io/Tiger0915/pen/GgjVLN
我有一个keyframe
动画开启hover
of the .circle
分区当您将鼠标悬停在其上时,它可以正常工作。
@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 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);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)