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

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

javascripthtmlcssangularjstwitter-bootstrap

The top margin in CSS relative positioning is not being displayed

My client has a specific requirement for the webpage to be positioned in the center of the screen. To achieve this, I have enclosed the entire webpage within a div element called "mainpage". Here is the CSS code: #mainpage { position:relative; wi ...

csscss-positionpercentagescreen-resolution

Retrieving the values of multiple selected options from various select fields simultaneously

Picture having a dynamic number of select fields (the value of this variable is not fixed). I am looking to extract the values of the selected option from each select field using jQuery (or vanilla JavaScript). This is my approach: var cars = $(".sele ...

javascriptjquery

Is your Facebook send button appearing strangely? Find out how to fix it here!

I recently integrated the Facebook send button on my website, allowing users to easily share information about each drive listed. However, a new issue has arisen where clicking on the send button opens a popup inside a table, negatively affecting the page& ...

phpjqueryhtmlcssfacebook

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

NextJs only displays loading animation once

Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with n ...

javascriptcssreactjsnext.js

The overlay only covers a portion of the page

I'm currently working on a new webpage and have found the perfect background image. However, I would like to add an overlay to darken the image. Unfortunately, the overlay doesn't cover the entire page! Despite my attempts, I haven't been s ...

htmlcss

"Encountering a 500 internal server error with jQuery and WordPress

I'm having issues implementing ajax into my WordPress project to dynamically load videos based on their post ID. Whenever I click on the video link, a 500 internal server error occurs. I'm sending the post ID through ajax to a PHP script where I ...

javascriptphpjqueryajaxwordpress

jQuery causing issues with CORS configurations

The following code snippet is from a WCF RESTful Service: public EmployeeJSON GetEmployeeJSON(string id) { List<EmployeeJSON> employees = new List<EmployeeJSON>() { new EmployeeJSON() {Name="Sumanth",Id=101,Sal ...

c#jquerywcf

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

javascriptjquerycss

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

javascripthtmljqueryjson

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

htmlcssshopify

Issue encountered with the DevExtreme npm module: Uncaught TypeError - $(...).dxButton is not recognized as a function

Instructions for installing DevExtreme npm can be found on their official page here: https://www.npmjs.com/package/devextreme var $ = require('jquery'); require('devextreme/ui/button'); var dialog = require('devextreme/ui/dialog&a ...

javascriptjquerynpmwebpackdevextreme

How can I store Ajax data in integer format?

I am attempting to retrieve data from a PHP page using ajax and then save it in a variable that will be used in a while loop. I have successfully displayed the number on the screen, confirming that the data retrieval is functioning. However, I am encounte ...

phpjqueryajax

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

Calculate the total number of table rows added using jQuery

I am seeking help to identify the error in my code. My goal is to count the number of table rows added by the end user and display an alert box if the row count is not equal to 2. Below is my HTML code: <table width="100%" border="0" cellspacing="0" c ...

javascriptjquerycounthtml-tablerow

Using jQuery to dynamically add one of two fields to a form

After successfully using JQuery to add a field to a form, I am now stuck on how to implement two add field buttons for adding different fields. Can anyone point me in the right direction? <html> <head> <title>jQuery add / remove textb ...

jqueryformsinput

I am seeking advice on how to incorporate JavaScript to adjust slider values and add numerical values or prices. Any suggestions would

Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories. My experience with JavaScript is limited, so I decided to reach out h ...

javascripthtmlcssconstantsslider

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

What measures can be taken to protect against XSS attacks when a user is allowed to use HTML tags, such as in a textarea element? Avoiding the stripping or escaping of all tags complicates the situation and rules out the option of using {{ }}. It's a ...

javascriptphphtmllaravelxss

Guide to receiving intermediate feedback from my REST service for a standalone GET request

I have been working on designing a user interface that includes a progress bar to display the percentage of completion for a user request. However, my backend REST service performs complex computations and is relatively slow. I would like to provide the u ...

web-servicesjqueryrestangularjsjersey