Trigger CSS3 animation only once upon the page loading

Question

Trigger CSS3 animation only once upon the page loading

I'm in the process of creating a stylish landing page using CSS3. One element that really stands out is an <a> tag with a cool animation:

@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
}

To take it up a notch, I decided to add a hover effect as well:

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

However, I encountered a problem when assigning these animations:

a {
    /* Some basic styling applied here */

    animation: splash 1s normal forwards ease-in-out;
}
a:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

Everything seems to work fine initially - the <a> element splashes and vibrates on hover. But once the user moves away from the element, the smooth transition ends abruptly and the animation starts over. While this behavior makes sense, it's not what I want. Is there a way to solve this issue without resorting to complex JavaScript tricks?

css css-animations

Answer 1

Answer №1

After dedicating several hours to searching online: Unfortunately, it is not achievable without the use of JavaScript. The animation-iteration-count: 1; is stored internally in the animation shorthand attribute, which is reset and overwritten on :hover. Once we remove focus from the <a> element and release the :hover, the previous class is reapplied, resulting in a reset of the animation attribute.

Regrettably, there is no method to retain a specific attribute state through different states of an element.

The only solution is to incorporate JavaScript for achieving this functionality.

Answer 2

After dedicating several hours to searching online: Unfortunately, it is not achievable without the use of JavaScript. The animation-iteration-count: 1; is stored internally in the animation shorthand attribute, which is reset and overwritten on :hover. Once we remove focus from the <a> element and release the :hover, the previous class is reapplied, resulting in a reset of the animation attribute.

Regrettably, there is no method to retain a specific attribute state through different states of an element.

The only solution is to incorporate JavaScript for achieving this functionality.

Answer 3

Answer №2

To make sure the animation on element A plays only once, simply include this line in the styling:

animation-iteration-count: 1

This will ensure that the animation runs just one time for the specified a element.

Answer 4

To make sure the animation on element A plays only once, simply include this line in the styling:

animation-iteration-count: 1

This will ensure that the animation runs just one time for the specified a element.

Answer 5

Answer №3

To achieve this effect, you just need to add a bit of extra code.

Wrap your link in a div and then specify the animation separately.

.animateOnce {
  animation: splash 1s normal forwards ease-in-out;
}

.animateOnHover:hover {
  animation: hover 1s infinite alternate ease-in-out;
}
@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

<div class="animateOnce">
  <a class="animateOnHover">me!</a>
</div>

Answer 6

To achieve this effect, you just need to add a bit of extra code.

Wrap your link in a div and then specify the animation separately.

.animateOnce {
  animation: splash 1s normal forwards ease-in-out;
}

.animateOnHover:hover {
  animation: hover 1s infinite alternate ease-in-out;
}
@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

<div class="animateOnce">
  <a class="animateOnHover">me!</a>
</div>

Answer 7

Answer №4

Just successfully tested this code snippet on both Firefox and Chrome. To customize the animation, simply add or remove the specified class below.

.animateOnce {
  -webkit-animation: YOUR-ANIMATION-NAME 0.5s normal forwards; 
  -moz-animation:    YOUR-ANIMATION-NAME 0.5s normal forwards;
  -o-animation:      YOUR-ANIMATION-NAME 0.5s normal forwards;
}

Answer 8

Just successfully tested this code snippet on both Firefox and Chrome. To customize the animation, simply add or remove the specified class below.

.animateOnce {
  -webkit-animation: YOUR-ANIMATION-NAME 0.5s normal forwards; 
  -moz-animation:    YOUR-ANIMATION-NAME 0.5s normal forwards;
  -o-animation:      YOUR-ANIMATION-NAME 0.5s normal forwards;
}

Answer 9

Answer №5

Simply utilize

animation: hover 1s ease-in-out forwards;

Answer 10

Simply utilize

animation: hover 1s ease-in-out forwards;

Answer 11

Answer №6

To easily address this issue, consider extending the duration of the animation within a:hover and utilizing transitions within @keyframes.

a:hover {
        animation: hover 200s infinite alternate ease-in-out;
    }

You can accelerate the progression of @keyframes by incorporating percentages.

@keyframes hover {
    0% {
        transform: scale(1, 1);
    }
    1% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1.1, 1.1);
    }
}

Increasing the duration to 200 or even 300 seconds should prevent the animation from restarting unnecessarily. Realistically, most users won't spend more than a few seconds hovering over an image.

Answer 12

To easily address this issue, consider extending the duration of the animation within a:hover and utilizing transitions within @keyframes.

a:hover {
        animation: hover 200s infinite alternate ease-in-out;
    }

You can accelerate the progression of @keyframes by incorporating percentages.

@keyframes hover {
    0% {
        transform: scale(1, 1);
    }
    1% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1.1, 1.1);
    }
}

Increasing the duration to 200 or even 300 seconds should prevent the animation from restarting unnecessarily. Realistically, most users won't spend more than a few seconds hovering over an image.

Answer 13

Answer №7

To achieve this effect, CSS alone is not enough and you will need to use a workaround with javascript. As some have already pointed out, the animation-iteration-count property gets reset on :hover. While it's recommended to implement everything in javascript, there may be instances where you prefer to leverage CSS for easier code customization.

Here's how you can do it in JS:

// applying a class to the html tag during the animation
const startPage = (() => {
  const html = document.documentElement,
        s = 'start';
  html.classList.add(s);
  window.addEventListener('load', function() {
    setTimeout(() => {
      html.classList.remove(s);
    }, 1500); // ensure the time matches or exceeds the duration of the CSS animation (I recommend adding a bit more).
  });
})();

As for the CSS:

/* the presence of the `.start` class triggers the animation */
.start .leaflet-marker-pane {
    animation: animDrop 1s ease;
}

Answer 14

To achieve this effect, CSS alone is not enough and you will need to use a workaround with javascript. As some have already pointed out, the animation-iteration-count property gets reset on :hover. While it's recommended to implement everything in javascript, there may be instances where you prefer to leverage CSS for easier code customization.

Here's how you can do it in JS:

// applying a class to the html tag during the animation
const startPage = (() => {
  const html = document.documentElement,
        s = 'start';
  html.classList.add(s);
  window.addEventListener('load', function() {
    setTimeout(() => {
      html.classList.remove(s);
    }, 1500); // ensure the time matches or exceeds the duration of the CSS animation (I recommend adding a bit more).
  });
})();

As for the CSS:

/* the presence of the `.start` class triggers the animation */
.start .leaflet-marker-pane {
    animation: animDrop 1s ease;
}

Answer 15

Answer №8

Initially, the code provided below did not include the property "iteration-count: 1", resulting in an unexpected behavior where all line items pulsated upon entering the screen until the last item loaded, despite the absence of the 'pulse' effect being applied.

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>

<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>

Answer 16

Initially, the code provided below did not include the property "iteration-count: 1", resulting in an unexpected behavior where all line items pulsated upon entering the screen until the last item loaded, despite the absence of the 'pulse' effect being applied.

<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>

<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>

<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>

<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>

<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>

Answer 17

Answer №9

After some exploration, I stumbled upon a fix for this issue: When implementing hover animations, use the following code:

animation: hover 1s infinite alternate ease-in-out,splash 1;

Answer 18

After some exploration, I stumbled upon a fix for this issue: When implementing hover animations, use the following code:

animation: hover 1s infinite alternate ease-in-out,splash 1;

Trigger CSS3 animation only once upon the page loading

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Adjust focus dynamically on pressing enter in an HTML form

Styling a half circle in React Native

Customizing form designs with the combination of Django and Bootstrap

Eliminate extra spacing in the panel-footer on mobile devices

adjust the div's position based on the window's scrolling bars

Position divs to be perfectly aligned and centered

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

When hovering over the JQuery drop-down menu, the menu will automatically close

Fast method or tool for generating a detailed CSS element list from deeply nested elements

What could be causing justify-content: flex-start; to not function as expected?

Modify just one of the padding axis while keeping the other constant by utilizing a media query

Sizing Children in Ant Design Inline Forms

What is the best way to arrange form inputs in a single row?

Issue with transition effect not functioning properly when hovering in HTML and CSS

Customize the appearance of the v-autocomplete component in Vuetify

Permanent header that clicks into place below the primary fixed header

Optimize my webpage for a specific location

What is the best way to make an element "jump to the top" when the parent element has reached its maximum height?

One helpful tip for adjusting the size of a UI chip on the fly

Ways to reduce the size of the border on the bottom in HTML/CSS