Awesome Library of CSS3 animations
Special thanks to daneden's Animate.css and Christian's magic for inspiration.
You're amazing, guys! 👍
Dynamic.css is a bunch of awesome, cross-browser CSS animations to use in any project.
It's perfect to animate incoming and leaving web page elements, but it also could be useful for sliders, :hover handlers and all kind of general use.
You can try it at this demo page.
You can download it from Bower
bower install UstymUkhman/Dynamic.cssor GitHub
git clone https://github.com/UstymUkhman/Dynamic.css.gitThen just load the script file in your application:
<script type="text/javascript" src="bower_components/Dynamic.css/dynamic.css"></script>- Include the stylesheet in your document's
<head>
<head>
<link rel="stylesheet" href="path/to/dynamic.css">
<!-- Or, for the minified version: -->
<link rel="stylesheet" href="path/to/dynamic.min.css">
</head>-
Add class
dynamicto the element you want to animate.
You may also want to include the classinfinitefor an infinite loop. -
Than you'll also have to add one of the following classes:
jumpblinkfitInfitOutwindyXwindyYspinXUpspinXDownspinYLeftspinYRightspinZInspinZOutmaterializevaporizestarWarsstarWarsFrontUpstarWarsFrontDownstarWarsBackUpstarWarsBackDowncomeInLeftcomeInUpcomeInDowncomeInRightcomeOutLeftcomeOutUpcomeOutDowncomeOutRightspeedInLeftspeedInRightspeedOutLeftspeedOutRightstairsInLeftstairsInstairsInRightstairsOutLeftstairsOutstairsOutRighthopInLefthopInhopInRighthopOutLefthopOuthopOutRightrollInLeftrollInRightrollOutLeftrollOutRightrollUpLeftrollUpDownrollUpRightrollDownLeftrollDownUprollDownRightfallDownInfallDownOutfallDownLeftfallDownUpfallDownRightroundOutLeftroundOutRightroundSlideLeftroundSlideRight
Once you've decided the animation to run, you have to add the corresponding CSS class via JavaScript (or jQuery) like this:
$('#elementToAnimate').addClass('dynamic jump');The default animation time for the most part of Dynamic.css animations is 2 seconds. Though, if you're not OK with that, you can overwrite the animation duration of the main class like this:
.dynamic {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}However, if you don't like the default duration time of a particular animation class, you can simply overwrite relative CSS rules of the animation you'd like to change:
.dynamic.fitOut {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}In this way you can also add delays for specific animations:
.dynamic.vaporize {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}Certain thing, you can also use jQuery to detect when the animation is finished to make some other stuff in the callback function:
$('#animatedElement').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function() {
// ...make some other stuff in the callback function.
});Dynamic.css is powered by grunt, so you can easily extend the library and create custom builds.
First of all, you’ll need Grunt and other dependencies:
$ cd path/to/Dynamic.css/
# If you haven't install NPM globaly, run:
$ sudo npm install
$ sudo npm install grunt --save-dev
$ sudo npm install grunt-contrib-grunt-contrib-concat --save-dev
$ sudo npm install grunt-contrib-grunt-contrib-uglify --save-dev
# Actualy, grunt doesn't minify well CSS files, so you can omit this one,
# but in that case you'll have to minify the builded file manualy.Once you've configured Gruntfile.js, as described here, go back to your terminal and run grunt in the project's folder to compile your custom builds.
The easiest way to update the library, is to add your new animations in the dist.src array of paths.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: '\n\n',
banner: mainDesc
},
dist: {
src: [
'animations/base.css',
'animations/specials/*.css',
'animations/star wars/*.css',
'animations/incomers & leavers/*.css',
'animations/speedy/*.css',
'animations/stairs/*.css',
'animations/jumpers/*.css',
'animations/rollers/*.css',
'animations/fallers/*.css',
'animations/turners/*.css'
// paths/to/your/files
],
dest: '<%= pkg.filename %>.css'
}
}
});But the most important thing of doing this is: have fun like I did! 😊
Dynamic.css is licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent