CODEWITHSUNDEEP
htmlcssanimation
MyStack
MyStack

Reputation: 53

Stop Animated object after mouse hover

I have a single object ( actually its a menu ) which having a bouncing animate and when i mousehover on it there is a sub menu slide up. what I want to do is, i need to stop the object bouncing when I hover mouse on it. simply I need to stop bounce animation on the object when I mouse hover it. how can I do that ?

body{padding: 3em; }
#menu * { 
  padding:0; 
  margin: 0; 
  font: 12px georgia; 
  list-style-type:none;
}
#menu { 
  float: left;
  line-height: 10px; 
  left: 200px;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #3B5330;
}
#menu a:hover {
  background: #B0BD97;
}
#menu ul li ul li a:hover { 
  background: #ECF1E7; 
  padding-left:9px;
  border-left: solid 1px #000;
}
#menu ul li ul li {
  width: 140px; 
  border: none; 
  color: #B0BD97;  
  padding-top: 3px; 
  padding-bottom:3px; 
  padding-left: 3px; 
  padding-right: 3px; 
  background: #B0BD97;
  z-index:1;
}
#menu ul li ul li a { 
  font: 11px arial; 
  font-weight:normal; 
  font-variant: small-caps; 
  padding-top:3px; 
  padding-bottom:3px;
}
#menu ul li {
  float: left; 
  width: 146px; 
  font-weight: bold; 
  border-top: solid 1px #283923; 
  border-bottom: solid 1px #283923; 
  background: #979E71;
}
#menu ul li a { 
  font-weight: bold;
  padding: 15px 10px;
}
#menu li{ 
  position:relative; 
  float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
  display:none;
  list-style-type:none; 
  width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
  display:block;
}
#menu:hover ul li:hover ul li:hover ul { 
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}
#menu:hover ul li:hover ul { 
  position: absolute;
  margin-top: 1px;
  font: 10px;
}
#menu >ul >li:hover >ul { 
  bottom:100%;
  border-bottom: 1px solid transparent
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1,1) translate(0px, 0px);
  }

  30%{
    transform: scale(1,0.8) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }

  100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
  text-align:center;
  height:20px;
  width:150px;
  padding:20px;
 -webkit-animation: bounce 3s infinite ;
}
<div id="menu" class="bounce">
  <ul>
    <li><center><a href="http://www.cafewebmaster.com">Home</a></center>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 56

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6148

Used the animation-play-state property can pause or resume an animation

.bounce:hover {
  animation-play-state: paused;
}


body{
  padding: 3em; 
}
#menu * { 
  padding:0; 
  margin: 0; 
  font: 12px georgia; 
  list-style-type:none;
}
#menu { 
  float: left;
  line-height: 10px; 
  left: 200px;
}
#menu a { 
  display: block; 
  text-decoration: none; 
  color: #3B5330;
}
#menu a:hover {
  background: #B0BD97;
}
#menu ul li ul li a:hover { 
  background: #ECF1E7; 
  padding-left:9px;
  border-left: solid 1px #000;
}
#menu ul li ul li {
  width: 140px; 
  border: none; 
  color: #B0BD97;  
  padding-top: 3px; 
  padding-bottom:3px; 
  padding-left: 3px; 
  padding-right: 3px; 
  background: #B0BD97;
  z-index:1;
}
#menu ul li ul li a { 
  font: 11px arial; 
  font-weight:normal; 
  font-variant: small-caps; 
  padding-top:3px; 
  padding-bottom:3px;
}
#menu ul li {
  float: left; 
  width: 146px; 
  font-weight: bold; 
  border-top: solid 1px #283923; 
  border-bottom: solid 1px #283923; 
  background: #979E71;
}
#menu ul li a { 
  font-weight: bold;
  padding: 15px 10px;
}
#menu li{ 
  position:relative; 
  float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
  display:none;
  list-style-type:none; 
  width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
  display:block;
}
#menu:hover ul li:hover ul li:hover ul { 
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}
#menu:hover ul li:hover ul { 
  position: absolute;
  margin-top: 1px;
  font: 10px;
}
#menu >ul >li:hover >ul { 
  bottom:100%;
  border-bottom: 1px solid transparent
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1,1) translate(0px, 0px);
  }

  30%{
    transform: scale(1,0.8) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }

  100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
  text-align:center;
  height:20px;
  width:150px;
  padding:20px;
 -webkit-animation: bounce 3s infinite ;
}

.bounce:hover {
  animation-play-state: paused;
}
<div id="menu" class="bounce">
  <ul>
    <li><center><a href="http://www.cafewebmaster.com">Home</a></center>
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Disclaimer</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions