Let’s say you’ve made a login form and you want to display a placard whenever the login information is incorrect to alert the user. For example, when the user types an incorrect email address or password, they see the placard above the form, with a white background and red text:

This is easy enough to accomplish with CSS and a little bit of JavaScript. However, let’s say we want to animate the placard so that every time it appears on the screen, it flips to the right, as if laying a card down to the right. This can be accomplished with some jQuery. For example:

var card = document.querySelector("#errorMessage");
var container = document.querySelector('.flip-container');
var isOpen = false;

function showCard() {
  if (!isOpen) {
    container.style.visibility = "visible";
    card.classList.add("flip");
    // document.querySelector(".flipper").classList.toggle("flip");
    isOpen = true;
    console.log("isOpen1", isOpen)
  } else  { 
    card.classList.toggle("flip");
    isOpen = false;
    console.log("isOpen2", isOpen)
    clickAgain();
  }
}

function clickAgain(){
  setTimeout(function() {
    $(document).ready(function(){
      $("#b1").click()
    });
  }, 350);
}

Here is the HTML:

<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
  <div class="flipper">
   <!-- text here will rotate --> 
      <div class="front">
         <!-- front content --> 
         <div class="error-box">
            Email address or password <BR>
            not found. <BR>
            Please Try Again.
         </div>      
      </div>
      <div class="back">
	<!-- back content -->
      </div>
   </div>      
</div>
<input type="button" id="b1" value="Show card" onClick="showCard();">

And here is the CSS used for styling:

body {
  background: #575955;
  color: white;
}
.error-box {
  width: 380px;
  height: 110px;
  background: #fff;
  border: solid 1px #B71C1C;
  border-radius: 9px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  color: #B71C1C;
  text-align: center;
  padding: 30px;
}

/* Hide the flip container to start */
.flip-container {
  perspective: 1000px;
  visibility: hidden;
}
.flip-container.flip .flipper {
  transform: rotateY(90deg);
  transition: 0.35s;
}

.flip-container, .front, .back {
  width: 320px;
  height: 200px;
}

/* flip speed goes here */
.flipper {
  transition: 0s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(-90deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(90deg);
}

 

The CSS for this technique is even more important than the jQuery. It uitlizes some rare features such as:

• transform: rotateY(90deg);
• transition: 0.35s;
• backface-visibility: hidden;
• transform-style: preserve-3d;

The jQuery toggles visibilty and classes that have animations attached to them, but does so in such a way that every time the button is clicked, the card starts over from the same hidden position. Here is an embedded Codepen that shows this technique in action:

See the Pen Animated altert box 4 (CSS transition + jQuery) – 2 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

For more information about these CSS techniques, see:
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://www.w3schools.com/css/css3_transitions.asp
https://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
https://www.w3schools.com/cssref/css3_pr_transform-style.asp