
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
jquery-css3-animation-queue
Advanced tools
Queue CSS3 animations to display when browser scrolls down to see element in viewport
jQuery CSS3 animation queue is a plugin to chain CSS3 animations one at a time, as well as delay the animation until the element is in the browser viewport.
To install via Bower, simply do the following:
$ bower install jquery-css3-animation-queue --save
or you can install via npm:
$ npm install jquery-css3-animation-queue --save
jQuery
and jquery-css3-animation-queue.js
in your document<script type="text/javascript" src="./jQuery.js"></script>
<script type="text/javascript" src="./jquery-css3-animation-queue.js"></script>
/* Required rule. Add to your CSS file */
.animated.standby {
-webkit-animation: none !important;
-o-animation: none !important;
animation: none !important;
visibility: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
animated
and standby
to the element you want to animate. Also remember to add whichever classes you need for your animation rules.Full example:
<h1 class="animated standby fadeIn">Example</h1>
The plugin reads the data properties delay
and offset
on each element.
The delay
property determines how much time to wait before animating the next element in the queue. If unset, defaults to 500
milliseconds. This is separate to the actual CSS animation duration and may contain a different value.
<div class="animated standby fadeIn" data-delay="2000">The next element in queue will animate in two seconds.</div>
The offset
property determines how much space between the bottom of the browser and the top of the element before the element is added to the active queue. If unset, defaults to 50
pixels. Higher numbers mean the user will have to scroll down more before animation starts.
<div class="animated standby fadeIn" data-offset="200">This element will be added to the animation queue when the space between the bottom of the browser and the top of the element is more than 200 pixels.</div>
jQuery CSS3 Animation Queue is licensed under the MIT license. (http://opensource.org/licenses/MIT)
FAQs
Queue CSS3 animations to display when browser scrolls down to see element in viewport
We found that jquery-css3-animation-queue 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.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.