堆栈内存溢出
  简体   繁体   English

在不改变div位置的情况下替换css动画

[英]replace css animation without changing the position of the div

 原文  2016-04-18 15:53:28  4   3    javascript/ jquery/ html/ css/ css3

问题描述

This is my code 这是我的代码

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

I want to change the animation of rightleft when hovering over the div. 当我将rightleft悬停在div上时，我想改变rightleft动画。 However when I do that, the position of the div gets back first and then changes the animation which creates a bad interaction experience. 然而，当我这样做时，div的位置首先返回，然后更改动画，这会产生不良的交互体验。

That being said I'm open to add any JS/JQuery code. 话虽如此，我愿意添加任何JS / JQuery代码。

Currently when the div is hovered it's stopped in its initial position and the new animation bubble takes place. 目前当div悬停时，它停在其初始位置并且发生新的动画bubble 。

MY GOAL IS : to make the div stop at it's current position and the new animation bubble starts while the div is stopped . 我的目标是：让div停在它的当前位置，并在div停止时开始新的动画bubble 。

and this is the code HTML 这是代码HTML 

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

CSS 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 个解决方案

解决方案1
 4 已采纳  2016-04-18 17:29:25

How about the following code? 以下代码怎么样？ 

.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 DEMO

解决方案2
 1  2016-04-18 16:59:57

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

Updated 更新 

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

解决方案3
 0  

add this code to the previous code and it will work 将此代码添加到以前的代码中它将起作用 

.circle:hover {
animation-name: rightleft;
animation-play-state: paused;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 通过改变css top在div动画中垂直滚动 - Vertical scrolling in div animation by changing css top 调整 div 的大小而不改变边的 position - resizing a div without changing the position of sides jQuery在位置.animation（..）之后通过.css（..）将div位置更改 - JQuery change div position by .css(..) after position .animation(..) 替换div的内容而不更改大小或滚动 - replace content of div without changing size or scrolling 在不冻结动画的情况下更改css线性渐变动画 - Changing a css linear gradient animation without freezing the animation CSS动画：使用相对于前一个的新位置移动div - CSS animation : move a div with the new position relative to the previous 用动画交换div位置 - Swap div position with animation 使用Java更改以％为单位给出的CSS Div位置值 - Changing CSS Div Position Value Given in % Using Javascript 如何通过使用JavaScript更改CSS值来​​移动/放置DIV容器？ - How to move/position DIV container by changing CSS values using Javascript? 如何在不更改 position 的情况下将 div 和 dl 包装在 js 中 - How to wrap div and dl in js without changing their position
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM