Moving smoothly after animation using @keyframes

I've successfully implemented a loading indicator using CSS3 keyframes, which animates its width from 0% to 100% when the .loading class is added to my loading bar. However, once the loading is complete, I want to smoothly transition out of the keyframes. Instead of abruptly jumping to 100%, I would like it to ease its way towards 100% where it will remain.

I've attempted to add a transition and animation to my loading bar class, but unfortunately, neither approach seems to be effective. How can I achieve the desired effect?

Check out the jsFiddle for reference.

csscss-animations

Answer №1

If you want to know when the animation has completed a loop, you can utilize the animationiteration event. This event will help you detect when the animation reaches the end of a loop, allowing you to remove the specified class.

$('#bar').on('webkitAnimationIteration', function(e){
    $('#bar').removeClass('loading').off('webkitAnimationIteration');
});

Check out the updated fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/

-

For simplicity, I have only included the webkit prefix in the fiddle. However, you can refer to this helpful article on CSS animation events in JavaScript http://www.sitepoint.com/css3-animation-javascript-event-handlers/. They provide a function to simplify using prefixes to support various browsers.

Answer №2

I gave a thumbs up to @Jedidiah's response, I believe it's exactly what you're looking for.

By the way, if you're open to exploring an alternative, straightforward CSS3 solution, you can add the following to your #bar:

transition: all 1s;
-webkit-transition: all 1s

Check out the Running Demo

Potential downsides (depending on your requirements):

  1. It may not maintain the previous progress bar speed (regardless of whether you're at 10% or 90%, the remaining portion will take 1 second to complete... however, this is typically how installer progress bars function, so it might not pose an issue);
  2. It may not execute the entire animation: if you're in the first half, it will fill towards the left instead of completing the full circle.

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

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

Stylized with different images scattered across the browser window

Is there a way to ensure that all my randomly positioned images stay within the bounds of their 100% wrap without being cut off? Currently, some images are getting cut off due to the overflow: hidden setting. Also, is it possible to prevent the images from ...

jqueryhtmlcss

The positioning of a div element is not functioning as expected

I am currently updating my portfolio project. The page I am working on includes an image with a specific date displayed on it. I want to add text below the image, but I am encountering some issues: The text I want to include is meant to be a link, like th ...

htmlcss

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

Limiting click event to only Image component in Next.js

Is there a way to trigger a click event only on the image itself, rather than the entire parent div? When setting width and height for the parent div, the click event seems to encompass the entire area. For instance, if the image is 600 pixels wide by 300 ...

javascriptcssreactjsimagenext.js

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

htmlcss

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

Hamburger icon is failing to appear in the collapsed navbar for certain items

My React application is not displaying the items of the collapsed navbar when using the Bootstrap navbar for mobile responsiveness. Can anyone please suggest what might be wrong here? <!-- Bootstrap 4.1.3 library --> <link rel="stylesheet" href ...

htmljquerycssbootstrap-4

Is there a way to position the input directly above the div in the center?

In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed. Currently, both elements s ...

cssangular

The table borders in IE 11 do not display properly when using Html5 and CSS

In a previous version, the table had visible borders. However, when I added the property text-align:center; to my container, the table did not align to the center. I then tried adding display:inline-block; to the table, which successfully centered it. It l ...

htmlcss

Sticky positioning and visible overflow restrictions

When position sticky is used within a container with overflow:hidden, it does not work as expected. However, the overflow hidden property is necessary in this case. <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden"&g ...

htmlcssimageoverflowsticky

Having trouble with Bootstrap 4 card image alignment within a tab panel

Encountering a challenge with nav-tabs nested within a card on a Bootstrap 4 webpage. My goal is to switch both the card text and the card-img-bottom simultaneously when toggling between nav-link options. To achieve this, I'm using a tab-pane that inc ...

htmlcsstwitter-bootstrapbootstrap-4vertical-alignment

Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizo ...

javascriptjquerycsshtml

Is it possible to execute a function within an HTML page simply by clicking on it?

As someone who is new to the world of HTML, CSS, and JS, I'm currently facing a challenge: On my website's page1.html, I have implemented a feature that allows users to sort different articles on the page by selecting a sub-menu from the navigat ...

javascripthtmlcss

Issue with Image Quality in Woocommerce/Wordpress Products

I'm experiencing an issue with either Wordpress or Woocommerce. Yesterday, I updated Woocommerce while installing a new theme. Unfortunately, I'm facing a problem now where I can't seem to improve the image quality on the product page. Jus ...

phpmysqlcsswordpresswoocommerce

Use the resizable function for widths greater than 1024px

I have a resizable function on my page: $(function() { $( "#droppable" ).droppable({ create: function( event, ui ) {$( this ).hide(0)} }); $( "#droppable" ).on( "dropover", function( event, ui ) { $( this ) $( this ).text('¿Eliminar?&apo ...

jqueryhtmlcss

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

<div id="sidebar" class="sidebar"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"> <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: a ...

javascriptjquerycss

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

Staggered Drop-Down Menus

I've created a custom CSS drop-down menu that works well, but I've realized that updating this menu across all the HTML pages on my website would be a tedious task. If I ever need to add a new section and tier to the menu, I'd have to update ...

htmlcssdrop-down-menu