替换css动画而不更改div

时间：2016-04-18 15:53:28

标签： javascript jquery html css css3

这是我的代码

https://jsfiddle.net/sameh0/hgk2uLfk/2/

我希望在将鼠标悬停在div上时更改rightleft的动画。然而，当我这样做时，div的位置首先返回然后改变动画，这会产生不良的交互体验。

据说我可以添加任何JS / JQuery代码。

目前，当div悬停时，它会停在其初始位置，并且会发生新的动画bubble。

我的目标是： 使div停在它的当前位置，并在div停止时启动新动画bubble。

这是代码 HTML 

<div class="circle"></div>

CSS 

 .circle{
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top:25%;
   left :28%;
  width: 90px;
  height: 90px;
  -webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
background-color:blue;
  background-size: 80%;
}
.circle:hover{
  background-color:red;
   -webkit-animation: bubble, 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  -moz-animation: bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  animation:  bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}

@-webkit-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-moz-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-ms-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}
@-webkit-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-moz-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-ms-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

3 个答案:

答案 0 :(得分：4)

以下代码怎么样？

.circle{
  background-color:blue;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}

.circle:hover{
  background-color:red;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21);
  animation-play-state: paused, running;
}

@keyframes rightleft {
  0% {
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    margin-left: -100px;
    margin-top: -100px;
  }
}

@keyframes bubble {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}

DEMO

答案 1 :(得分：1)

https://jsfiddle.net/hgk2uLfk/10/

更新

<div class="circle">
  <div class="bubble"></div>
</div>



.circle{
  position: absolute;
  z-index: 100;
  top:25%;
  left :28%;
  -webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}

.circle:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.bubble {
  width: 90px;
  height: 90px;
  cursor: pointer;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-color:blue;
  background-size: 80%;
}

.bubble:hover{
  background-color:red;
  -webkit-animation: bubble, 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  -moz-animation: bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  animation:  bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}

@-webkit-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-moz-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-ms-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}
@-webkit-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-moz-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-ms-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

答案 2 :(得分：0)

将此代码添加到上一代码中，它将起作用

.circle:hover {
animation-name: rightleft;
animation-play-state: paused;
}
相关问题
最新问题