stackoom
  简体   繁体   中英

replace css animation without changing the position of the div

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

Question

This is my code

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

I want to change the animation of rightleft when hovering over the div. However when I do that, the position of the div gets back first and then changes the animation which creates a bad interaction experience.

That being said I'm open to add any JS/JQuery code.

Currently when the div is hovered it's stopped in its initial position and the new animation bubble takes place.

MY GOAL IS : to make the div stop at it's current position and the new animation bubble starts while the div is stopped .

and this is the code 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 answers

solution1
 4 ACCPTED  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

solution2
 1  2016-04-18 16:59:57

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

solution3
 0  

add this code to the previous code and it will work 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Vertical scrolling in div animation by changing css top resizing a div without changing the position of sides JQuery change div position by .css(..) after position .animation(..) replace content of div without changing size or scrolling Changing a css linear gradient animation without freezing the animation CSS animation : move a div with the new position relative to the previous Swap div position with animation Changing CSS Div Position Value Given in % Using Javascript How to move/position DIV container by changing CSS values using Javascript? How to wrap div and dl in js without changing their position
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM