animate-css / animate.css Goto Github PK
View Code? Open in Web Editor NEW🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
Home Page: https://animate.style/
License: Other
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
Home Page: https://animate.style/
License: Other
I'm doing some testing and ran into a problem where all elements on the page will glich blink, redraw themselves, after the completion of an animation on one div.
This only happens on my iPad running iOS 4 and does not happen on my iPhone running iOS 5. It also does not occur on either device when running the animate.css demo page.
Any idea what could be doing that would cause this to happen?
Thanks very much for the great lib!
You mean “complement” as in complementary angles (those that together combine to 90º) rather that “compliment” as in flattery.
This guy here :
body {
-webkit-transform: translate3d(0,0,0);
}
Breaks position:fixed in Chrome and Safari, making it behave like it was position:absolute
Animations doesn't seems to work on localhost in any modern browser.
Using jQuery I tried addClass when hover, clicking, etc. But nothing seems to work.
I'm missing something?
Couldn't figure out why .rotateInUpRight
had -webkit-transform-origin: right bottom;
defined on both the start and end keyframes, but it causes weird compression issues. See: css/csso#80
Right now there is a big change ongoing in CSS and it's the apparition of CSS preprocessors like LESS or SASS.
These languages offer an enormous addition of potential to CSS with the benefit of being lightweight. Thus it would be a good idea to combine the power of animate.css with such of LESS per example. Thus creating a jQuery-free version of animate.css
Here's what it would look like. At the beginning of the animate.less file, you would find this LESS mixin (mixins are kind of "functions" if you're not familiar) :
.animate(@animation: fadeIn, @duration: 1, @transition: ease, @delay: 0)
{
-webkit-animation: @animation @duration @transition @delay;
-moz-animation: @animation @duration @transition @delay;
-ms-animation: @animation @duration @transition @delay;
-o-animation: @animation @duration @transition @delay;
animation: @animation @duration @transition @delay;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
Then to apply an animation on something, instead of using jQuery or Javascript of any sort you would call that mixin and the name of the animation you want :
@import "animate.less";
.button:hover
{
.animate(wobble);
}
#body
{
.animate(bounceInRight, 5s, ease-in-out, 5s);
}
The beauty of it is that, would the animate.less be included on a page, it would still be backward compatible with using it the jQuery way since LESS files are ultimately read as CSS files.
Anyway, I just thought it would be a really amazing feature of animate.css to maintain a animate.less at the same time. It might seem arbitrary to support a third-party technology like that but I'm not joking about how big preprocessors are becoming. Even Twitter is using them.
In Chrome / OS X, the demo page at http://daneden.me/animate/ shows up mostly blank. All I see is the Github corner widget, the title animate in, and the footer after scrolling down a bunch of blank white space.
Text selection tells me it's empty content, but I see everything that should be in the DOM via WebKit Inspector. Tried a bit of tinkering, suspect it comes down to the default animations.
(edit to add: I'm on the most recent build, 15.0.874.100 -- I tried it on a slightly older build, same result)
Android devices fail to display animated elements with more than one property within the animation keyframes.
As far as I can tell, the only possible solution is to warn users of this issue or to try and provide simpler fallback animations with only one property.
Hi,
Please compare this and this to see what I mean.
In the first one, I have modified animate.css so that the opacity is set to 1 on the final key frame, even though it already gets set to this value in an earlier key frame. This makes the element to which this animation is applied retain the final opacity.
Here's the JS Fiddle code:
<div id="foo">
</div>
#foo {
opacity: 0;
position: absolute;
width: 100px;
height: 200px;
top: 10px;
left: 10px;
border: 1px solid black;
}
/*
Animate.css - http://daneden.me/animate
LICENSED UNDER THE MIT LICENSE (MIT)
Copyright (c) 2012 Dan Eden
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
opacity: 1;
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
opacity: 1;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
```
```javascript
$(document).ready(function() {
$("#foo").addClass("animated bounceIn");
});
I'm developing an application, and a friend of mine integrated this CSS3 animations into my app. But we noticed a little problem, the "animation-fill-mode" when is set to "both" it messes the z-indexes of the pseudo elements :before and :after.
It's not a big deal, but I would appreciate it if someone had a fix for that.
The CSS spec says that translateY/translateX shouldn't affect layout, but in Firefox the following animations cause scrollbars to appear on the page:
The following animations also cause scrollbars, but are removed when the animation ends:
Whether this is an issue with Mozilla's implementation of the translate property or an issue with using the translate property itself is not yet clear.
Some animations exhibit an issue where the interior square-edged background creeps outside the animation shape. All animations were tested at 100% zoom, and the following comprise the entire set that exhibited the issue.
This was observed on a Macbook Retina via Chrome Canary (Version 26.0.1369.0).
I don't want to download a 2500+ CSS file just to use a couple animations.. I think the proper way to organize the project is having different CSS files for each animation so user can pick only the animations he want, it will be also easier to maintain as well.
I would probably create a separate folder for each animation kind ("attention", "fadeIn", "fadeOut") and create a stylesheet called "all.css" inside each folder that would @import
all the stylesheets inside the same folder and also a stylesheet that imported all the "all.css" stylesheets.
Hello, great looking animations. I'd like to apply these to show/hide effects is this possible?
Currently animate.css is about 76KB, which might not seem like much, but for comparison purposes it comes down to >x2 the size of jQuery.min. Compressed it goes down to about 17KB, a 77% reduction. Not as big a deal for desktop, but might make a difference for mobile. Responsible developers might compress it themselves for production, but including a .min version might be a nice idea :)
When I tried to download only bounceOutDown class elements from http://daneden.me/animate/build/, the class elements were missing from css file.
Thanks,
Hovhannes
Can be used to animate loading spinner which can be a png32 with semi transparency. It should just rotate an element in the loop.
.rotate {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
curious to know why you added 'Out' and 'In' spliced into the middle of the animation names. was it purely for how the name sounds?
because i'm implementing a simple animateOut
and animateIn
method in javascript and realizing how much easier it would be to just be able to prepend Out
and In
to strings instead of maintaining a map somewhere of all the simple names to both out and in.
i even thought i could be clever and split on the first capital letter and inject Out
or In
but lightSpeedOut
breaks that pattern.
any thoughts?
When zooming the viewport on iOS Safari, the text within animated elements becomes blurred/pixelated.
Screenshot here - http://cl.ly/BAQW
I initially thought it was a problem with either text-rendering
or -webkit-font-smoothing
, but neither seem to be affecting the result.
Made a little video for this one, since it would be hard to explain over text.
I'm on OSX in Chrome Version 20.0.1132.57. The issue is also present on Safari 5.1.7. All good in Firefox.
It's such a weird issue that I'm almost sure it's a Webkit issue. But I'm putting it out here for discussion's sake. Any thoughts?
Both Tada and Pulse animations exhibit a visual bug during animation - with Tada it occurs in the second phase of the animation and transitions away during the third phase, with Pulse it transitions in during the first phase and transitions out during the second.
Ignoring rotation and scaling differences, the visual appearance of the bug is exactly the same in both animations - the right edge extends outwards significantly, and the bottom edge extends outwards less significantly.
See below a frame exhibiting the bug from second phase of the Tada animation.
This is more of a feature that I found myself adding.
.animated .delay200 {
animation-delay: 0.2s;
}
I wanted this because I am doing a lot of animations on page load and I didn't want to do them in javascript.
I also didn't want to do:
.animated {
animation-delay: 0.2s
}
Because I want each animation to have a sequential order. I was figuring there would be some default ones. Anyone else see this as useful? Or do you think it is too specific for what I was doing?
I want to use this in a webapp but i have some issues.
Lets imagine a navigation which fades in/out when youre on a certain page. All elements would have to be on display:none so that they don
t affect the layout and when i animate them into the page (visually), they would need to get opacity:0, then remove display:none or set it to block and then start fadeing in.
Is there a way at the moment to use this styles in a real app without writing many lines of javascript to handle this? I`m just curios.
I only checked this in Chrome. I'm not sure what about animate.css does this, but including it on the page forces the fonts to be rendered using regular anti-aliasing (no subpixel). even setting the css render property manually has no effect. For an example, look at http://daneden.me/animate/ as far as I can tell, none of the text has subpixel anti-aliasing.
I am using animate through out a responsive site I am building. It is absolutely gorgeous. Especially on the iPhone. There is one issue. I am using typekit to serve fonts and occasionally I have an extreme blurring of the text. I've tested this and it seams to be in areas that are animated with larger amounts of content. I wrote some jquery to replace animate classes from bounceIn to fadeIn, just less drastic transitions. It seamed to work, but it started happening again today. Has anyone else experienced something like this at all?
Hi,
I've been using your animations for some time now but I always struggle to find the best way to use them. Maybe you can provide some examples?
Thanks
hi
i try to use pluse effect on a text in my project which every 15s do effect it means pulse effect after 5s run again each 15s infinitely
For example, I want to use bounceInDown
, so that when the user clicks on a link, a div bounces in to the page.
Right now, I have to add this styling to that element, so that it initially does not appear on the page:
.my-div {
-webkit-transform: translateY(-2000px);
-moz-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
-o-transform: translateY(-2000px);
transform: translateY(-2000px);
}
Maybe a style like bounceInDown-init
is needed:
.bounceInDown-init {
-webkit-transform: translateY(-2000px);
-moz-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
-o-transform: translateY(-2000px);
transform: translateY(-2000px);
}
Clicking on a test button on the home page more than once will not work - the user must click on another test, then return to the desired test.
It appears that the .removeClass().addClass() jQuery function is executing too quickly. I've also tried adding a relatively short delay, but no success.
When I rewrite the '.animated' , just change the 'ease' to 'linear', there is no different in Webkit browsers.
Is the shorthand wrong ?
Add support for upcoming Opera support for animations.
Obviously something I'm not doing correctly but can't figure it out! Here's the jsfiddle of my code.
I uploaded this test for the problem:
http://hectorgarrofe.com/animatecssvideo/index.html
Using animate.css animate.css I can't get the video player on iOS working.
The demo has 2 videos, the first video has an animation, the second one is not animated.
If you try it in an iOS device, you can play the non animated video but you can't play the animated one.
Anyone has a solution for the problem?
You can see the source in the demo link, only 20 lines of code.
Thanks in advance!
I have an image on the page and use 'rollOut' on it. Everything works fine, it rolls out and disappears but when the animation finishes the element shows up again. When i check out the demos on http://daneden.me/animate it is not the case. Faded out elements stay faded out.
Here is my example: http://dev.newarts.at/etaxi/webapp/v2/
Any idea?
Not a major issue, but how should the naming conventions work?
For example, if an animation brings the element from left to right (ie fadeInLeftBig), should the animation be named 'left' (coming from the left) or 'right' (moving to the right)?
My last information was, that only transform3d is hardware accelerated, isn't it?
For this one can use transform3d(0, 0, 0) for the case transform is not needed, just acceleration.
Best,
Oleg
I think it's a good idea to namespace all the classNames to avoid name collisions (eg. .anim-flash
, .anim-fadeOut
, etc..) - it will be also easier to identify that class is only used for animation purposes.
see SMACSS explanation about different types of rules.
PS: didn't suggested .a-flash
, .a-fadeOut
because a
is ambiguous (link element <a>
).
After upgrading to Safari 6, flippers effects aren't working anymore
This may not be the appropriate place to file this. If not, can someone please direct me tot he correct tracker or appropriate contact?
There is an issue with the web-based build tool which causes CRLFs to be inserted on some of the line endings in the file. The initial comment block uses LFs and so do the declarations for '.animated' and '.animated.hinge' but beginning with the keyframes declarations every line after has CRLFs.
The only options I had checked were fadeOutDown and fadeInDown.
Hi,
What about the browser support ? Is that designed to work under IE7/8/9 right now or later may be ?
Thanks a lot !
The demonstration page does not work in Opera 11.64 and 12 alpha. Clicking or hovering above elements yield no response.
Here: https://gist.github.com/4567791 Not really an issue, just an FYI. Great project!
It's possible to add 'hinge' that starts from top-right corner of element?
Not really an "issue" but I was wondering if there was any elegant way to override the animation properties? For example, the fadeInLeft has: -webkit-transform: translateX(-20px);
Is there a good way to override it with a -300px w/o having to change it for each class?
Thanks,
Scott.
Hi,
Normally class names like attributes are hyphen separated, not camelcased. Every good framework uses this style. It's just not nice to mix camel cased names together with hyphen separated in html tags.
github pages is an awesome feature and it will make it easier to update the file in case someone else forks the project and decide to add new animation types, fix errors, improve documentation... (issue #1 and #3 are a good example)
I created available gem in Ruby on Rails.
https://github.com/camelmasa/animate-rails
Please add this link to README, I am glad ;)
Is there a way to do this?
it just fades. please fix.
great compilation... good job 👍
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.