I am trying to uss cssflip animation in my code in which the element rotates when hovered upon. I have used transition and backface-visibilty property. It is working fine on chrome but it is not working properly on safari. I have used webkit prefix as well for safari browser.
`.card-container{
margin-top: 9%;
perspective: 900px;
-webkit-perspective: 900px;
z-index: 1;
}
.card{
float: left;
width: 78.5%;
height: 35%;
margin-top: 25%;
border: 1px solid #A08C87;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#front #back{
color: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
front{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
back{
display: flex;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
font-size: 20px;
}
.card-container:hover .card{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
back{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}`
I think the issue here is with the
backface-visibility: hidden;
It's not being supported in ios and in safari.
In your code just replace the code with
#front #back {
color: white;
-webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility:visible;
backface-visibility: hidden;
}
I hope this will help you.
Related
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
jQuery('.card').mouseenter(function(e) {
e.stopPropagation();
jQuery(this).addClass('flipped');
}).mouseleave(function(e) {
e.stopPropagation();
jQuery(this).removeClass('flipped');
});
.card {
width: 150px;
height: 300px;
position: absolute;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
One way to solve the issue is to add a wrapper around the card and listen to events on the wrapper instead of the card
jQuery('.wrapper').mouseenter(function(e) {
e.stopPropagation();
let $this = jQuery(this).find('.card');
if(!$this.hasClass('flipped')){
$this.addClass('flipped');
}
}).mouseleave(function(e){
e.stopPropagation();
jQuery(this).find('.card').removeClass('flipped');
});
.wrapper{
width: 150px;
height: 300px;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
</div>
I develop a website custom card carousel with react.js and anime.js.
I do a flip animation on the card in the center of the screen. It work fine with opera, firefox and chrome but I have an issue with safari. I test it with safari 13.0.4.
And the animation is ok but just after the animation, the text go behind the card. And after the 3rd iteration it work fine.
front card
back card Opera, Chrome, Firefox and on Safari (after the 3rd flip for Safari)
back card Safari
back card Safari without color and with black text
Here my css:
.partner-card-focused--background__extern {
transition: background-color 0.35s ease-in-out;
border-bottom-right-radius: 5.5vh;
height: 50vh;
width: 35vh;
margin-left: 2vw;
margin-right: 2vw;
margin-top: 3.8vh;
padding: 1vh;
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.50);
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.front,
.back
{
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
transform: translateZ(0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
}
.back-hidden {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
top: 0;
left: 0;
transform: rotateY(180deg) translateZ(0);
-webkit-transform: rotateY(180deg) translateZ(0);
-moz-transform: rotateY(180deg) translateZ(0);
-ms-transform: rotateY(180deg) translateZ(0);
}
.partner-card-focused--background__intern {
border-bottom-right-radius: 4.5vh;
height: 50vh;
width: 35vh;
overflow: hidden;
position: relative;
z-index: 2;
}
.partner-card-focused--image {
position: relative;
z-index: 1;
width: 100%;
}
.partner-card-focused--description {
position: fixed;
margin: 1vh;
font-size: 2vh;
display: block;
}
Here my react render methode:
render() {
let overClass = "";
if (this.state.hover)
overClass += " blue-color--back"
else
overClass += " black-color--back"
return (
<div>
<div className="partner-card-focused--text--container">
<div className="partner-card-focused--square blue-color--back"/>
<Typing text={this.state.partner.name} startTime={450} spacetime={80} class="partner-card-focused--text black-color font-first" />
</div>
<div ref={this.targetContainer}>
<div className={"partner-card-focused--background__extern button" + overClass} onClick={this.click} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover} ref={this.targetCard}>
<div className="front">
<h1 className="partner-card--text white-color font-first select-none back-hidden">{this.state.partner.name}</h1>
<div ref={this.targetBackgroundIntern} className="partner-card-focused--background__intern white-color--back back-hidden">
<img ref={this.targetImage} src={this.state.partner.image} className="partner-card-focused--image select-none back-hidden" alt="Focused partenaire poster"/>
</div>
</div>
<div className="back">
<p className="partner-card-focused--description white-color font-first back-hidden">{this.state.partner.description}</p>
</div>
</div>
</div>
</div>
)
}
And the flip methode:
this.flipped = !this.flipped;
let callback = () => {this.playing = false;}
anime({
targets: this.targetCard.current,
scale: [{value: 0.90}, {value: 1.25}, {value: 1, delay: 250}],
rotateY: {value: '+=180', delay: 200},
easing: 'easeInOutSine',
duration: 400,
complete: function(){
callback();
}
});
Thanks in advance for any help.
As Safari doesn't manage correctly transform-style with preserve-3d, you should put 1px to translateZ() into .back class to avoid that glitch.
I am trying to build an animation where each time a card is clicked the card flips over and reveals the opposite side. The words on each side of the card will change every time the card is flipped. The problem I am having is that the front face of my card only is visible on sporadic occasions. I cannot find any logic to why the front face is normally not visible but occasionally will be visible.
This is my jsfiddle: https://jsfiddle.net/tdammon/ucf6mx1q/
Here is the HTML structure:
<body>
<section>
<div id="headerSection">
<h1>Heard At Prime</h1>
</div>
<div id='whiteBlock'>
<div id='front'>hey</div>
<div id='back'>hi</div>
</div>
</section>
</body>
</html>
Here is the flipping logic for the #whiteBlock div:
$(document).ready(onReady);
function onReady(){
$('#whiteBlock').on('click', flipIt)
}
quotesArray=['hey','cool saying','funny thing','hahaha'];
function flipIt() {
console.log('flip')
$('#front').empty();
$('#back').empty();
let firstQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
let secondQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
$('#front').append(firstQuote);
$('#back').append(secondQuote);
$('#whiteBlock').toggleClass('flip');
};
And the CSS animations:
body {
background-color: blue;
}
section{
perspective: 500px;
}
#whiteBlock{
background-color:white;
height: 100px;
width:100px;
transform: scale(1);
transform-style: preserve-3d;
/* transition: transform .5s; */
display: flex;
justify-content: center;
align-items: center;
/* position: absolute;
animation: move 3s linear infinite; */
}
#whiteBlock:active{
transform:scale(.97);
transition: transform .2s
}
#whiteBlock.flip{
transform:rotateY(180deg)
}
#front{
transform: rotateY(180deg);
backface-visibility: hidden;
}
#back{
position:absolute;
backface-visibility: hidden;
}
backface-visibility still requires vendor prefixes. So you'll need -webkit-backface-visibility for Chrome and Safari and -moz for Firefox.
With a couple changes this more of less works for me in Safari and should be a good starting point:
$(document).ready(onReady);
function onReady() {
$('#whiteBlock').on('click', flipIt)
}
let quotesArray = ['hey', 'cool saying', 'funny thing', 'hahaha'];
function flipIt() {
console.log('flip')
$('#front').empty();
$('#back').empty();
let firstQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)]
let secondQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)]
$('#front').append(firstQuote);
$('#back').append(secondQuote);
$('#whiteBlock').toggleClass('flip');
};
section {
perspective: 500px;
}
#whiteBlock {
border: 1px solid #333;
height: 100px;
width: 100px;
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
position: relative;
}
#whiteBlock.flip {
transform: rotateY(180deg)
}
#front {
transform: rotateY(0deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#back {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="headerSection">
<h1>Heard At Prime</h1>
</div>
<div id='whiteBlock'>
<div id='front'>hey</div>
<div id='back'>hi</div>
</div>
</section>
.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
jsFiddle here
I did not produce the majority of the code.
The icon flips/rotates when a user hovers over the icon.
I realize this is done via the hover class.
However I would like to trigger this animation manually (via an event etc).
I understand it is not possible to trigger hover as it is not a trusted event.
Can someone help me re-code this so that the animation is triggered via jQuery?
In your css where you set the hover states, you could add a selector that does the same for a specific class. In my example I added the class hover, so the line .social-icon:hover now becomes .social-icon:hover, .social-icon.hover etc.
You can then toggle this class using jQuery's .toggleClass() function.
In the below example I do this using a button and a click event.
I added a background color just so the icon is more visible, so this has nothing to do with the actual answer ;)
$('#triggerHover').on('click', function() {
$('.social-icon').toggleClass('hover');
});
body {
background: #ccc;
}
.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover, .social-icon.hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front, .social-icon.hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back, .social-icon.hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
<button id="triggerHover">Click me!</button>
I'm trying to create an animated envelope on my site.
Right now, the code I'm trying to use only starts the next step of the animation on click.
My question would be how I get the animations to occur automatically after a certain amount of time.
This is how the code looks right now:
Javascript:
<script type="text/javascript">
// Wait for page to load
window.onload=function(){
$(document).ready(function () {
// Hide the div
$("#card").hide();
// Show the div after 5s
$("#card").delay(5000).fadeIn(100);
});
// Add Flip Envelope Event Handler
document.getElementById('envelope_front').onclick = function(){
document.getElementById('envelope_front').classList.toggle('flipped');
document.getElementById('envelope_back').classList.toggle('flipped');
}
// Add Open Envelope Event Handler
document.getElementById('flap_outside').onclick = function(){
document.getElementById('flap_outside').classList.toggle('open');
document.getElementById('flap_inside').classList.toggle('open');
// Add Remove Card Event Handler
// This is added after "Open Envelope" so that card can't be removed
// until the envelope has been opened
document.getElementById('envelope_back_outside').onclick = function(){
document.getElementById('card').classList.toggle('removed');
return false;
}
return false;
}
// Open Card
document.getElementById('card').onclick = function(){
document.getElementById('card_outside_front').classList.toggle('open');
document.getElementById('card_inside_top').classList.toggle('open');
return false;
}
}
</script>
CSS:
<style type="text/css">
body{
background-color: #fff;
color: #666;
font-family: Futura, Helvetica, Sans-serif;
text-align: center;
-webkit-perspective: 1000;
}
#envelope{
position: relative;
width: 600px;
height: 400px;
margin: 200px auto 0 auto;
}
#envelope_front{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
z-index: 1; /* This seems required for Chrome */
background: #FFF url('images/card-sprite.png') 0px 0px;
cursor: pointer;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) translateZ(10px);
}
#envelope_front.flipped{
-webkit-transform: rotateY(-180deg);
}
#envelope_back{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
background: #FFF url('images/card-sprite.png') -600px -400px;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg) translateZ(3px);
}
#envelope_back.flipped{
-webkit-transform: rotateY(0deg);
}
#flap_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px -200px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0) translateZ(3px);
}
#flap_outside.open{
-webkit-transform: rotateX(180deg) translateZ(0);
}
#flap_inside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px 0px;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(-180deg) translateY(-200px) translateZ(3px);
}
#flap_inside.open{
-webkit-transform: rotateX(0deg) translateY(-200px) translateZ(0);
}
#envelope_back_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
cursor: pointer;
background: transparent url('images/card-sprite.png') 0px -400px;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(2px);
}
#card{
position: absolute;
top: 10px;
left: 10px;
width: 580px;
height: 380px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
}
#card.removed{
-webkit-animation-name: remove-card;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#card_outside_front{
position: absolute;
width: 100%;
height: 100%;
background: #FFF url('images/card-sprite.png') -1800px 0px;
cursor: pointer;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0deg) translateZ(0px);
}
#card_outside_front.open{
-webkit-transform: rotateX(180deg);
}
#card_inside_top{
width: 100%;
height: 100%;
position: absolute;
background: #FFF url('images/card-sprite.png') -1210px -10px;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 380px;
/* 379 is used instead of 380 to prevent any gap between the two layers (visible in Safari) */
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(-180deg);
}
#card_inside_top.open{
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(0deg);
}
#card_inside_bottom{
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Hide behind #card_outside_front and #card_inside_top */
background: #FFF url('images/card-sprite.png') -1210px 390px;
}
/* Animation Keyframes for removing the card */
#-webkit-keyframes remove-card {
0% {
-webkit-transform: translateY(0px) translateZ(1px);
}
33% {
-webkit-transform: translateY(-400px) translateZ(1px);
}
67% {
-webkit-transform: translateY(-400px) translateZ(3px);
}
100% {
-webkit-transform: translateY(0px) translateZ(3px);
}
}
</style>`
You can use setTimeout with a given x delay time:
setTimeout(function() {
//put your animation code here
}, 2000);
To delay the animations in JS (and JQuery) you can use the delay function, you already are using it in some places. If you want the delay on the CSS you should apply the animation-delay property
You can use a timeout or you can use css animation-delay property without using too much javascript (I usually pick the second).