Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations.

HTML

<div id="notification" class="alert" role="alert"></div>

JS

$('#notification').html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().delay(5000).addClass('bounceOutUp');

CSS

#notification {
    position: fixed;
    top: 5px;
    border-radius: 0;
    width: 100%;
    display: none;
    z-index: 1200 !important;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
       transform: translate3d(0, -3000px, 0);
    }
    60% {
       opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
     }
     75% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0);
     }
    90% {
       -webkit-transform: translate3d(0, 5px, 0);
       transform: translate3d(0, 5px, 0);
     }
     to {
      -webkit-transform: none;
       transform: none;
   }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform:translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}
@keyframes bounceOutUp {
    20% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0);
     }
     40%, 45% {
        opacity: 1;
         -webkit-transform: translate3d(0, 20px, 0);
          transform: translate3d(0, 20px, 0);
     }
    to {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}
.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}
jqueryhtmlcssanimation

Answer №1

To create a smooth transition between animations, you can implement an `animationend` event listener along with a `setTimeout()` function to trigger the next animation after the current one has finished.

var $notification = $('#notification'),
    delay = 5000;
$notification.html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().one('animationend',function() {  
  var timeout = setTimeout(function() {
    $notification.addClass('bounceOutUp');
  },delay)
});
#notification {
  position: fixed;
  top: 5px;
  border-radius: 0;
  width: 100%;
  display: none;
  z-index: 1200 !important;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* CSS Keyframes for animations */


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification" class="alert" role="alert"></div>

An alternative method is to adjust the `animation-delay` property of the `.bounceOutUp` class directly instead of using a timer to control the timing of the animations.

var $notification = $('#notification');

$notification.html('This place is already occupied!').addClass('alert-warning animated bounceInDown').show().one('animationend',function() {
  $(this).addClass('bounceOutUp');
});
#notification {
  position: fixed;
  top: 5px;
  border-radius: 0;
  width: 100%;
  display: none;
  z-index: 1200 !important;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Same CSS Keyframes as above */
  
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
  animation-delay: 5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification" class="alert" role="alert"></div>

Answer №2

I'm not sure if I am interpreting your question correctly, but you can create a delay using CSS:

div {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}

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

Converting JSON DateTime objects to local time in JQuery without considering timezones

I am struggling with parsing a JSON DateTime object using moment.js. Despite trying various methods recommended on Stackoverflow, nothing seems to work in my case. In my application, I save DateTime values in UTC format and when displaying them, I need to ...

javascriptc#jqueryangularjsmomentjs

Preventing pop-up windows from appearing when triggered by a mouse click event

I am looking for a solution to trigger a popup window when a user right-clicks on a specific area. Here is the current code I am using: $("#popup").bind('mousedown', function(e) { var w; if(e.which==3) { w=window.open('link& ...

javascriptjquerypopupwindow.openright-click

An issue with Destination-Out Composition in HTML5 Canvas

While working on a canvas, I have encountered an issue with deleting a portion of a curve I have drawn. Specifically, I need to remove the last 25% of the curve after it is complete and keep only the first 75%. However, when attempting to delete the lines ...

htmlcanvasdrawing

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Unable to eliminate the string "C:fakepath" using JavaScript's replace function and regular expressions

I've been struggling for quite some time with this issue. Let me share a snippet of the code that's causing trouble: jQuery(':file').change(function() { var path = jQuery(this).val(); var filename = path.replace(/C:\\ ...

javascriptjqueryregex

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: However, what's happening in my case is t ...

jqueryhtmlcssslick.js

Yii: Error: The method 'typeahead' is not defined for the object [object Object]

I am currently working on a project using Yii and I encountered a small issue with the Typeahead widget from Yiistrap. It seems that jQuery is being included multiple times - twice before the inclusion of bootstrap.js and once after. Uncaught TypeError: O ...

javascriptphpjquerytwitter-bootstrapyii

Communicating between iframes and parent elements via events

I'm trying to trigger an event in my iframe using the following code: $('body').trigger('my_event'); However, I want to bind this event on my main page that contains the iframe like this: $('iframe').find('body&ap ...

javascriptjqueryhtmliframe

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between d ...

javascripthtmlcss

Managing the URLs of single page applications

Typically in a Single Page App (SPA), there is usually one main page that contains a side navigation menu with various anchor tags. These anchor tag URLs are managed by the angular/react/sammy js router, and the content of the main section is updated based ...

jqueryangularjsreactjssingle-page-applicationsammy.js

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

I have a Bootstrap Button group with a split button dropdown. My goal is to change the text, href, and icon on the button when an option is selected from the dropdown. I am able to change the text successfully, but I'm having trouble updating the HREF ...

javascriptjqueryhtmltwitter-bootstrapfont-awesome

Generate and delete dynamic iFrames through variable manipulation

I'm currently developing a landing page specifically for our pilots to conveniently access weather information before taking off. However, due to the limitations posed by our computer security measures, I can only utilize iframes to obtain the necessa ...

javascripthtmlvariablesiframe

Struggling to differentiate between JSON data and regular data in a Django AJAX request

After doing some research on JSON online, I still haven't fully grasped the concept. Currently, I am reading an article that might help me understand it better: The beginning of the article where the function is using JSON is quite confusing to me. ...

jsonjquerydjango-modelsdjango-templates

Activate fancybox when clicked, triggering numerous ajax requests

Although I achieved my desired output, the method in which it was done is not ideal because AJAX duplicates with every click. Check out my code: <a href="/messages/schedule" class="greenbtn fancybox">Schedule</a> $('a.fancybox').cl ...

javascriptjqueryfancybox-2

Passing an array to a PHP file using an AJAX request in jQuery is not supported

I'm attempting to send a serialized array through an ajax request to my saveData.php file so I can store the data in my database. var postData = $('#formular').serializeArray(); Here is the data I want to send. To prepare it for passing, I ...

phpjqueryjsonajax

The reloadGrid function in jqGrid does not function properly when the last record is deleted

I implemented a jqGrid on my web page that interacts with the server using a json post request. Additionally, I have included a delete button on the same page which triggers an ajax post to delete the selected record from the grid. Upon successful deletion ...

jqueryjqgrid

Adjusting the height of a DIV element to suit the window dimensions

I am facing an issue with the following HTML code: <div id="subpageHeaderImageSection"> <div id="subpageHeaderLeft"> <span id="holdImageP"></span> <!--[if lte IE 10]><img id="igm" src="theImages/sub ...

javascriptjqueryhtmlcss

Error is being returned by the JSONP callback

Looking to grasp JSONP. Based on my online research, I've gathered that it involves invoking a function with a callback. Other than that, is the way data is handled and the data format similar to JSON? I'm experimenting with JSONP as shown below ...

javascriptphpjqueryjsonajax

Using the JQuery template with $.get function does not produce the desired result

Working on populating a table using a Jquery Template can be tricky. One challenge is incorporating a json file via an ajax call for the population process. $(document).ready(function() { var clientData; $.get("/webpro/webcad/lngetusuario", funct ...

javascriptjqueryjsonajax

A guide on embedding a PHP page within a div using jQuery

Picture this: I have two divs, a left div and a right div. In the left div, I've placed some buttons. When I click on the home button, home.php is loaded into the right div using the load() function. Similarly, clicking on the about button loads abou ...

phpjquery