animations.css
Advanced tools
CSS3 Animation Cheat Sheet
npm install --save-dev animations.cssyarn add --dev animations.cssbower install --save-dev animations.cssThe CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.
The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accommodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Below are instructions on how to get started.
Add the animation stylesheet to the <head> element of your webpage:
<head>
<link rel="stylesheet" href="animations.css">
</head>
css with the name of the directory where the animation stylesheet is.Add an animation class to the element you want animated:
<div id="object" class="slideUp">
Replace slideUp with the desired animation class.
For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element:
#object {
background-color: #fe5652;
visibility: hidden;
}
visibility: hidden; is used to hide elements before the animation is activated.The values for these animations are relative to the element's size. That means bigger images have more exaggerated animations and smaller images have more subtle animations. While these animations are simple to implement, feel free to tweak values in the stylesheet to get the right effect.
By default, these animations will trigger when the page loads - even if the element is further down the page - but by using jQuery there are many ways you can activate the animations. See how you can use these animations on your website.
Add jQuery to the <head> element of your webpage:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</body> tag to trigger the animation when the user scrolls to the element:<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
#animatedElement with the ID or class of the element you want animated.slideUp with an animation class.400 represents the space between the element and the top of the screen. The animation activates when the element is 400px from the top of the screen. Increase this number to make the animation activate sooner.Add this before the </body> tag to trigger the animation when the user clicks on the element:
<script>
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});
</script>
MIT © Rodney Dennis
FAQs
CSS3 Animation Cheat Sheet
We found that animations.css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.