Change Animation Speed on Hover

Change Animation speed on hover

This solution uses a wrapper for the orbit with the same keyframe animation (reversed) which pauses/runs to change the animation speed on hover :

DEMO

.wrapper{  position:absolute;  top:40%; left:50%;  margin-left:-125px;  margin-top:-65px;  width: 250px; height:250px;
  -webkit-animation:spin 20s linear infinite;  -moz-animation:spin 20s linear infinite;  animation:spin 20s linear infinite;
  -webkit-animation-direction: reverse;  -moz-animation-direction: reverse;  animation-direction: reverse;
  -webkit-animation-play-state: paused;  -moz-animation-play-state: paused;  animation-play-state: paused;}
#universum-planet1 {  height:250px; width: 250px;  z-index:1;  border: 1px solid #989898;  border-radius: 225px;  -webkit-animation:spin 15s linear infinite;  -moz-animation:spin 15s linear infinite;  animation:spin 15s linear infinite;  -moz-transform-origin:center center;  -webkit-transform-origin:center center;  transform-origin:center center;}#planet1 {  position:absolute;  top:5%; left:5%;  height: 50px; width: 50px;  z-index:2;  -webkit-animation:spin 30s linear infinite;  -moz-animation:spin 30s linear infinite;  animation:spin 30s linear infinite;  -moz-transform-origin:center center;  -webkit-transform-origin:center center;  transform-origin:center center;}.wrapper:hover{  -webkit-animation-play-state: running;  -moz-animation-play-state: running;  animation-play-state: running;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div class="wrapper">  <div id="universum-planet1">    <div id="planet1"> <a href="universe.html" id="enterLink">      <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="Sample Image" onMouseOver=   "this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /></a>     </div>  </div></div>

How to slow down CSS animation on hovering element without jumps?

The issue is that both animations have the same start/end point and different duration. One will be faster than the other BUT they won't have the same state at different time slot.

You can imagine both animations start running at the same time and it's like you hide one and you show the other one.

Here is an example, hover on the first one and you will see it behave like the second one:

.marquee {  height: 30px;  min-width: 1140px;  width: 100%;  overflow: hidden;  position: relative;}
.marquee p {  position: absolute;  height: 100%;  margin: 0;  line-height: 30px;  text-align: center;  transition: all 0.3s ease;  animation: scroll-left 20s linear infinite;}
.marquee.next p,.marquee:hover p  {  animation: scroll-left 30s linear infinite;}
@keyframes scroll-left {  0% {    transform: translateX(100%);  }  100% {    transform: translateX(-100%);  }}

<div class="marquee">  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div><div class="marquee next">  <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Change animation's transition speed in CSS when un-hovering element

Try this :

For the basic class ( not the :hover ), just define the transition duration you want for when the list will disapear.

On hover, define a new transition duration ( the duration that the list will take to appear ).

Quick exemple here : http://codepen.io/AxelCardinaels/pen/wBQZbm

HTML :

<div class="text">Some texte</div>

CSS :

.text{
  background:blue;
  transition:all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
}

.text:hover{
  background:red;
  transition-duration:2s;
}

css transition: choose different speed for hover out

Don't fret. try this (quick IN, slow OUT):

.main img {
  width: 25%;
  height: 100%;
  transition: width 2s ease;
}
.main img:hover {
  width: 50%;
  transition: width .5s ease;
}

Your Fiddle as I can see it only has one transition. If you're only changing the width, tell it to change the width, which has full browser support, rather than calling transform with all the attendant prefixes.

Is there a way to slow down the hover effect?

You could add css3 transitions:

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

---

Related Topics