愿所有的美好和期待都能如约而至

反转悬停时的关键帧动画

发布时间:  来源:互联网  作者:匿名  标签:compass css css-animations error Reversing a Keyframe Animation on Hover Out exc  热度:37.5℃

本文介绍了反转悬停时的关键帧动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里有一个演示:

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);
  }
}

这篇关于反转悬停时的关键帧动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP