animate-css / animate.css Goto Github PK

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?

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.

it just fades. please fix.

great compilation... good job 👍

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.

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?

Hi,

What about the browser support ? Is that designed to work under IE7/8/9 right now or later may be ?

Thanks a lot !

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.

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!

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.

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);
    }
}

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 ?

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.

Hello, great looking animations. I'd like to apply these to show/hide effects is this possible?

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)?

I created available gem in Ruby on Rails.
https://github.com/camelmasa/animate-rails

Please add this link to README, I am glad ;)

After upgrading to Safari 6, flippers effects aren't working anymore

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!

The CSS spec says that translateY/translateX shouldn't affect layout, but in Firefox the following animations cause scrollbars to appear on the page:

• bounceOutRight
• bounceOutDown
• fadeOutRightBig
• fadeOutDownBig

The following animations also cause scrollbars, but are removed when the animation ends:

• bounceInRight
• bounceInUp
• fadeInRightBig
• fadeInUpBig

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.

A custom build tool similar to modernizr would be great, so the user could select only the animations he want to use.

issue #4 is also related.

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)

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,

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

Is there a way to do this?

BACKGROUND

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).

SCREENSHOTS

1. tada
   
2. bounceIn
   
3. bounceOut
   
4. pulse
   
5. lightSpeedIn
   
6. lightSpeedOut
   

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)

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

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?

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

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 dont 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.

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.

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

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 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?

Obviously something I'm not doing correctly but can't figure it out! Here's the jsfiddle of my code.

http://jsfiddle.net/mn4Xr/2/

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

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.

.

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!

Add support for upcoming Opera support for animations.

Made a little video for this one, since it would be hard to explain over text.

http://youtu.be/0XttO-Diz2g

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?

On http://daneden.me/animate/

You mean “complement” as in complementary angles (those that together combine to 90º) rather that “compliment” as in flattery.

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");
});​

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?

It's possible to add 'hinge' that starts from top-right corner of element?

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 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.

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>).

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);
}

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