After the completion of the animation, the hover effect resets back to its original state

Here's an example:

Check it out here

CSS

.intro-side3.out {
  animation-name: out;
  animation-duration: 2s;
}

.intro-side3.over {
  animation-name: in;
  animation-duration: 2s;
}

@-webkit-keyframes out {
    0%{background-position:100% 49%}
    100%{background-position:0% 52%}
}

@-webkit-keyframes in {
    0%{background-position:0% 52%}
    100%{background-position:100% 49%}
}

Javascript

$('.intro-side3').hover(
function() {
  $(this).removeClass('out').addClass('over');
},
  function() {
    $(this).removeClass('over').addClass('out');
  }
);

I am experimenting with a gradient animation on hover, and then reversing the animation when the mouse moves away. It works mostly fine, except that if you hover for more than the specified 2 seconds, the gradient goes back to its original state. I'm not sure why this is happening.

Maybe I am overlooking something obvious, right?

javascriptjquerycsshovergradient

Answer №1

Try using the animation-fill-mode: forwards; property

Check out this example on CodePen for reference.

You don't need JavaScript to achieve the same effect

@import url(https://fonts.googleapis.com/css?family=Montserrat:300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:600);

.bold-600 {
  font-family: montserrat;
  font-weight: 600;
}

.main {
  padding-left: 0;
}

.main2 {
  padding-left: 0;
  padding-top: 10px;
}

.intro-side3 {
  padding: 2rem;
  height: 400px;
  font-size: 24px;
  color: white;
  font-family: montserrat;
  background: linear-gradient(270deg, #662d91, #00aeef, #ec008c);
  background-size: 600% 600%;
  animation-name: out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.intro-side3:hover {
  animation-name: in;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes out {
  0% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-webkit-keyframes in {
  0% {
    background-position: 0% 52%
  }
  100% {
    background-position: 100% 49%
  }
}
<div class="main2 col-lg-3 col-md-4">
  <h1 style="font-family:montserrat; font-size:24px; padding:20px;">Hover /w Reverse</h2>
    <div class="intro-side3 gradientbg">
      <div class="inner">
        <p>We are here to <span class="bold-600"> do things</span> and <span class="bold-600">also maybe some stuff.</span>
      </div>
    </div>
</div>

Answer №2

experiment with including the subsequent attribute in your CSS

animation-iteration-count: 1;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rapid routes

Currently, I am working on developing a content preprocessor using NodeJS I have come up with 3 specific methods of preprocessing: generating html producing xhtml creating xml Each method requires different middleware, making them distinct from one anot ...

javascriptnode.jsexpress

Vue JS - Toggle visibility of an element based on radio button selection

When selecting between true or false radio buttons, I want a block to appear when "One" is clicked and be hidden when "No" is clicked. Here is the code snippet I used: <template> <div> <div> <label >One & ...

javascriptvue.jsvuejs2boolean

Steering your pop up to the top with CSS

Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...

htmlcsspopup

Developing a basic AJAX / jQuery / PHP script to retrieve all data from a database table and

My main goal is to pass an array from PHP to JSON and utilize it in my js file, where the jQuery is utilized with $.ajax({}). Here's what I have accomplished so far: $db = new PDO('mysql:host=localhost;dbname=names', 'username', ...

phpjquerymysqlajaxjson

Picking 2 values at random from the project array

My task is to develop a program that adds together 2 randomly selected values. The program should include a function with a list of numbers ranging from 1 to 9. Two random values are to be retrieved from this list using array.splice(). Once the two rando ...

javascriptarraysrandomarray-splice

"Vanishing Act: Why Bootstrap Table Rows Myster

When I click the buttons, rows are added and deleted successfully. However, when I resize the window to check mobile responsiveness, the rows disappear. I am new to Bootstrap and unsure if I have made any mistakes. $(document).ready(function() { //Try ...

javascripthtmljquerycssbootstrap-4

Using the .map method to index an array is causing issues in Node.js

Hey everyone, I'm struggling to properly index a JSON array using the map function. It seems like my code isn't quite right. This is what I have: var entireHTMLssssq = lloopmois.map((result, index) => `<div id=${index} style="position: a ...

javascriptarraysjsonnode.js

Incorrect way of tallying items in an object and the proper method for tallying similar values between objects and arrays

My attempt was to count the occurrences of the same values in objects and arrays. The goal was to display the initial numbers that appear in arrays within an object. Here is my flawed code along with an example case: let index = {}; let result = []; cons ...

javascriptarraysjsonobjectduplicates

I plan to use Symfony to submit a form that includes multiple select options with unique identifiers

I have created a form with several select options generated using a for loop. <form action="#" method="POST" id='from_quantity' name="from_quantity"> {% for PanierProduct in PanierProducts %} <input type="hidden" name="idProduct" value= ...

phpjqueryajaxsymfony

Comparing jQuery Elements

As per the jQuery documentation, it is stated that "Not All jQuery Objects are Created ===." The documentation also points out an important detail about the unique nature of each wrapped object. This uniqueness holds true even if the objects were created ...

javascriptjquery

Is there anything else I should attempt in order to fix this npm start error?

I have been troubleshooting this issue by researching other stack overflow posts, but I continue to encounter the same error message repeatedly. My goal is to execute a Javascript program that incorporates ReactJS. Initially, everything was functioning sm ...

javascriptreactjsnpmtruffle

The issue arises when attempting to use input alongside debounce, event.persist(), and storing the value at the parent component

Is there a way to implement an input field with debounced search where the value is passed from the parent component? Currently, when I pass the value from the parent component it doesn't work as expected. What would be the correct approach to make th ...

javascriptreactjsdebouncing

Tips for clearing a session with jQuery

Currently, I am in the process of developing an MVC application and have successfully utilized sessions in both the view and controller components. When a value is selected from a dropdown list for the first time, it is managed in both the view and control ...

jqueryasp.net-mvc

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

Currently, I am in the process of learning nextjs as a beginner. Through the utilization of the getStaticProps function, I have come to understand that data fetching occurs only once at build time and the values remain static thereafter. Despite this, I ...

javascriptnext.js

The div elements filled with data from WP_Query are exhibiting strange behavior on smartphones, experiencing graphical abnormalities

As I work on developing a Wordpress site, I encounter an issue that needs addressing. The problem arises when divs populated from a WP_Query, which include background images and text, display a graphical glitch on mobile browsers. This glitch seems to be ...

phpcsswordpressadvanced-custom-fields

Utilizing JQuery Ajax for HTTP requests switches the method from POST to GET

Can anyone help with my JQuery issue? Every time I try to submit the form, it changes from POST to GET and causes problems. I've exhausted all my solutions. <script> $(function () { $('form#signup').on('submit', ...

jqueryajaxformspostget

utilizing BrowserRouter for dynamic routing in react-router-dom

I'm currently facing a challenge with creating a multi-tenant SaaS solution. Each tenant needs to be able to use a subdomain, so that I can extract the subdomain from the URL and make a call to a REST API to retrieve data specific to that tenant. For ...

javascriptreactjsfrontendreact-router-v4react-router-dom

Scope problem leading to variable being returned as undefined

Having some trouble with fetching youtube videos for the data I scraped from officialcharts.com. Even though I can scrape the data and obtain the youtube URLs, the variable youtubeUrl is not being assigned a value when I try to push the data into the array ...

javascriptjsonnode.jsyoutubecheerio

Generating navigation links with search queries

Embarking on the journey of incorporating pagination alongside user-defined search parameters has left me puzzled. I have a good grasp on pagination implementation without user input, but once user input factors in, confusion sets in. I find myself at a lo ...

javascriptphpjqueryajaxpagination

Passing image source from parent component to child component in Vue.js

I encountered an issue where I stored the image file name in a variable within the parent component and passed it to the child component using props. However, despite this setup, the child element is not displaying the image as expected. Here is the data ...

javascripthtmlvue.js