Switch from animation to transition when hovering

Question

Switch from animation to transition when hovering

I'm facing an issue with a link that has an infinite animation changing the background color. I'm looking to stop the animation and have it transition into a different background color upon hovering over it.

.startlink{
    background-color:#206a9e;
    color:#fff;
    border-radius:15px;
    font-family: 'Myriad Pro';
    -webkit-animation:changeColor 3.4s infinite;
    -webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
    -webkit-animation-play-state: paused;
    background-color: #014a2a;
}

@-webkit-keyframes changeColor 
{
    0%   {background:#206a9e;}
    50%  {background:#012c4a;}
    100%   {background:#206a9e;}
}

Can anyone help me understand why this code isn't working as expected? Is there another method to achieve this without using Javascript?

css

Answer 1

Answer №1

Give -moz-animation: 0; a shot. Check out this demo. Using 0 sets the value of animation to default, effectively disabling any existing CSS3 animations.

Answer 2

Give -moz-animation: 0; a shot. Check out this demo. Using 0 sets the value of animation to default, effectively disabling any existing CSS3 animations.

Answer 3

Answer №2

-webkit-animation-play-state: paused as well as -webkit-animation-play-state: running

Answer 4

-webkit-animation-play-state: paused as well as -webkit-animation-play-state: running

Answer 5

Answer №3

Discovered an alternative method to make this happen.

Create a new set of animation keyframes and trigger it on hover.

.startlink{
background-color:#206a9e;
color:#fff;
border-radius:15px;
font-family: 'Myriad Pro';
-webkit-animation:changeColor 3.4s infinite;
-webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
-webkit-animation:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}

Answer 6

Discovered an alternative method to make this happen.

Create a new set of animation keyframes and trigger it on hover.

.startlink{
background-color:#206a9e;
color:#fff;
border-radius:15px;
font-family: 'Myriad Pro';
-webkit-animation:changeColor 3.4s infinite;
-webkit-transition:all 0.2s ease-in;
}

.startlink:hover{
-webkit-animation:hoverColor infinite;
}

@-webkit-keyframes changeColor 
{
0%   {background:#206a9e;}
50%  {background:#012c4a;}
100%   {background:#206a9e;}
}
@-webkit-keyframes hoverColor 
{
background: #014a2a;
}

Answer 7

Answer №4

After exploring various methods to achieve a desired functionality, I stumbled upon an unconventional solution using basic CSS techniques. You can check out the implementation in this interactive example. While not the most elegant approach, it successfully accomplishes the task at hand.

#menu, #yellow{
  position: fixed;
  top: 2.5vw;
  right: 2.5%;
  height: 25px;
  width: 25px;
  border-radius: 30px;
}

#menu{
  animation: blink 2s infinite;
transition: 1s;
}

@keyframes blink{
  0% { background-color: grey; }
  50% { background-color: black; }
  100% { background-color: grey; }
}

#yellow{
background-color: rgba(255, 0, 0, 0);
transition: 1s;
}

#disque:hover #yellow{
pointer-events: none;
background-color: rgba(255, 0, 0, 1);
}

#disque:hover #menu{
opacity: 0;
}

<div id="disque">
  <div id="menu"></div>
  <div id="yellow"></div>
</div>

Answer 8

After exploring various methods to achieve a desired functionality, I stumbled upon an unconventional solution using basic CSS techniques. You can check out the implementation in this interactive example. While not the most elegant approach, it successfully accomplishes the task at hand.

#menu, #yellow{
  position: fixed;
  top: 2.5vw;
  right: 2.5%;
  height: 25px;
  width: 25px;
  border-radius: 30px;
}

#menu{
  animation: blink 2s infinite;
transition: 1s;
}

@keyframes blink{
  0% { background-color: grey; }
  50% { background-color: black; }
  100% { background-color: grey; }
}

#yellow{
background-color: rgba(255, 0, 0, 0);
transition: 1s;
}

#disque:hover #yellow{
pointer-events: none;
background-color: rgba(255, 0, 0, 1);
}

#disque:hover #menu{
opacity: 0;
}

<div id="disque">
  <div id="menu"></div>
  <div id="yellow"></div>
</div>

Answer 9

Answer №5

Facing the same dilemma, I discovered a helpful solution.

To achieve this, create the desired animation and assign unique classes to each element involved.

Next, utilize jQuery's .mouseover() or .mouseenter() events to toggle between the assigned classes for each animation.

This method mirrors the handling of a burger menu, albeit with a different trigger mechanism.

Answer 10

Facing the same dilemma, I discovered a helpful solution.

To achieve this, create the desired animation and assign unique classes to each element involved.

Next, utilize jQuery's .mouseover() or .mouseenter() events to toggle between the assigned classes for each animation.

This method mirrors the handling of a burger menu, albeit with a different trigger mechanism.

Answer 11

Answer №6

Are you intrigued by the idea of creating a slideshow animation with a pause between two images?

var NumImg = 1; //Keep track of image number to display
var MaxImg = 3; //Total number of images in the directory (named 1.jpg, 2.jpg...)

function BackgroundAnimation() {
  NumImg = NumImg > MaxImg ? 1 : NumImg +=1;
  var MyImage = "http://example.com/Images/" + NumImg + ".jpg";
  $("#Img1").attr("src", MyImage);
  $("#Img2").fadeOut(3000, function() {
    $("#Img2").attr("src", MyImage);
    $("#Img2").fadeIn(1);
  });
}

setInterval("BackgroundAnimation()", 10000); //delay between changing images

#BackgroundAnim {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0 0 0 -8;
}

#BackgroundAnim img {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="BackgroundAnim">
  <img id="Img1" src="http://example.com/Images/1.jpg" />
  <img id="Img2" src="http://example.com/Images/1.jpg" />
</div>

Answer 12

Are you intrigued by the idea of creating a slideshow animation with a pause between two images?

var NumImg = 1; //Keep track of image number to display
var MaxImg = 3; //Total number of images in the directory (named 1.jpg, 2.jpg...)

function BackgroundAnimation() {
  NumImg = NumImg > MaxImg ? 1 : NumImg +=1;
  var MyImage = "http://example.com/Images/" + NumImg + ".jpg";
  $("#Img1").attr("src", MyImage);
  $("#Img2").fadeOut(3000, function() {
    $("#Img2").attr("src", MyImage);
    $("#Img2").fadeIn(1);
  });
}

setInterval("BackgroundAnimation()", 10000); //delay between changing images

#BackgroundAnim {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0 0 0 -8;
}

#BackgroundAnim img {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="BackgroundAnim">
  <img id="Img1" src="http://example.com/Images/1.jpg" />
  <img id="Img2" src="http://example.com/Images/1.jpg" />
</div>

Switch from animation to transition when hovering

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Establish a minimum width requirement for a Bootstrap4 webpage and ensure that scrollbars are visible

Struggling to align the footer of your webpage and ensure it adjusts proportionally with the window size?

What could be causing the last LI to drop onto a new line when floating UL to the right?

Ways to eliminate underline on list items with CSS

Safari does not support font-face rendering, unlike Chrome

Show the separation between columns in a bootstrap table

Button displayed on complete Bootstrap 4.5 Card

Instructions for transitioning a triangular shape from pointing downward to pointing upward utilizing CSS and jQuery

Gallery not responsive on HTML/CSS site

"Utilize CSS Flexbox to create a layout with set width and uniform

How can I use CSS to ensure that both cards and images are equal in size?

Getting rid of an accidental div around an input field that was generated by Bootstrap with the help of

Is it possible to simultaneously execute an animate and a fade out effect?

Upon clicking on a different div, a div will elegantly slide down from above the footer

Modifying the Hover Color of the Navbar in Bootstrap 4: Tips and Tricks

Using Bootstrap 3's hidden-xs class can help slim down the width of

Which specific CSS stylesheet do LinkedIn, Facebook, and Quora utilize for their websites?

Using Google-Prettify with AngularJS

Adding design to distinct element after clicking a button

Dynamic motion for the circular progress bar during initialization