Animate delay Sass Mixin

Developer
Alex Rodrigues
Size
3,050 Kb
Views
34,408
  1. Animate delay Sass Mixin Previews
  2. Animate delay Sass Mixin HTML Codes
  3. Animate delay Sass Mixin CSS Codes
  4. Animate delay Sass Mixin JS Codes

How do I make an animate delay sass mixin?

Sass Mixin for delaying animations using nth-child. What is a animate delay sass mixin? How do you make a animate delay sass mixin? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.

Animate delay Sass Mixin Previews
IQ Test

Animate delay Sass Mixin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate delay Sass Mixin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="animate-trigger"> <h1>Animation Delay</h1> <p>click here to restart</p> </div> <ul class="main"> <li class="main__item">Block 1</li> <li class="main__item">Block 2</li> <li class="main__item">Block 3</li> <li class="main__item">Block 4</li> </ul>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animate delay Sass Mixin - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Open+Sans";
@keyframes show { 0% { opacity: 0; transform: translateY(250%); } 90% { opacity: 1; transform: translateY(-70%); } 95% { opacity: 1; transform: translateY(50%); } 100% { opacity: 1; transform: translateY(0); }
}
body { font-family: "Open Sans", sans-serif; box-sizing: border-box;
}
.animate-trigger { text-align: center;
}
.wrapper { padding: 2% 0;
}
.wrapper h1 { font-size: 3rem; font-weight: bold; text-align: center; margin-bottom: 20px;
}
.main { width: 90%; margin: 40px auto; display: flex; justify-content: space-between;
}
.main__item { opacity: 0; transform: translateY(250%); padding: 40px; text-align: center; background: #6dcff6; flex-basis: 23%; margin: 20px;
}
.animate-in .main__item { animation-name: show; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0; animation-iteration-count: 1; animation-fill-mode: forwards;
}
.main__item:nth-child(1) { animation-delay: 700ms;
}
.main__item:nth-child(2) { animation-delay: 1200ms;
}
.main__item:nth-child(3) { animation-delay: 1700ms;
}
.main__item:nth-child(4) { animation-delay: 2200ms;
}

Animate delay Sass Mixin - Script Codes JS Codes

$(document).ready(function() { $(".main").addClass("animate-in")
});
$(".animate-trigger").on("click",function() { $(".main").removeClass("animate-in") setTimeout(function() { $(".main").addClass("animate-in") }, 300)
})
Animate delay Sass Mixin - Script Codes
Animate delay Sass Mixin - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 3
Size 3,050 Kb
Views 34,408
Do you need developer help for Animate delay Sass Mixin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Rodrigues (alex_rodrigues) Script Codes
Name
Responsive Checkout Concept WIP
Jquery Scroll test
A Pen by alex rodrigues
Playing with Grid
Animated Bar Graphs
SA_testing
Toying With Flexslider
WIP - Checkout Flow Steps Progress mobile concept
Transition Demo
Responsive Table-less Shopping Cart
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!