The only required prefix for the latest 2 versions of any modern browser are -webkit: http://caniuse.com/#feat=css-animation

Great job on this, by the way!

@tgdev
in your Sass _fadeInRight.scss _fadeOutRight.scss you have the
$base-distance * 2 variable instead of 100%
but the effect makes the fadeIn & fadeOut slow, very different from the original.
I had to change it to 100% again.

Can you explain why you changed it?

Bourbon, the simple and lightweight mixin library for Sass also implements a prefixer() mixin. When importing this library after Bourbon, many things break. As a quick fix I can just import this library before Bourbon, but in the long run it would be best to avoid this naming collision.

Hi,
There is a problem in your animation prefixer which causes most animations not to play in FF and IE.
It' adds quotes to the animation-name property like this: animation-name: 'zoomIn';
It works fine in webkit but in other browsers it causes a parse error. Here is the fix:
@mixin animate-prefixer($property, $value...) {
-webkit-#{$property}:unquote($value);
-moz-#{$property}:unquote($value);
-o-#{$property}:unquote($value);
#{$property}:unquote($value);
}
please update the master code.

See the audit log:

Due to the missing package.json no one is able to install this git repo directly via npm.

Instead of writing lots of configuration variables (that might be added and forgot to be removed as the project goes), why not define all animation classes using % selectors and @extend ?

Before:

$use-fadeIn: true;
@import 'animate-sass/animate';

.some-class {
...
}

After:

@import 'animate-sass/animate';

.some-class {
@extend %animate-fadeIn; // prefix with "animate" to prevent collision
...
}

This way only animations actually used will be outputted by sass compiler.

First of all, thank you for porting it into usable .SCSS files!

Could you provide an example based on your files, I cannot make it working.

UPDATE: It works, missed one part from your tutorial.

Hello everyone,

I working on a project that has a version of animate-sass in a physical form but I try to pass that inside my node_modules with yarn them execute one task for generating all my styles but I see a problem because my re-write classes don't recognize the include sentence. How can I fix that problem?

//This is my variable content inside my _variable.scss

$use-fadeInLeft: true !default;
$use-fadeInUp: true !default;
$use-fadeInDown: true !default;
$use-fadeOutRight: true !default;
$use-flash: true !default;

//This is a part of the content inside my mobile.scss

@import "../../global/_variables";
@import '../../../../node_modules/animate-sass/_animate';
@import "../../global/_animations";

And the error is this:

My little code that shows that problem is this one:

.fadeInLeftEffect {
	@include fadeInLeft(
	$duration: 2s,
	$count: 1,
	$delay: .5s,
	$function: ease,
	$fill: both
	);
}

Anyone that could help me to fix this problem, please.

Any chance of a version bump release to include recent changes? cheers

Hello,

You are using $use-bounce variable for multiple purpose :

• Activate all bounces effects
• Attention seekers bounce effect

It seems that cause some trouble when want to use only the attention seekers.

Mabye it should be good to separate the variables
with $use-bounce and $use-bounces

Thanks in advance

Your readme file says "There is a small section at the bottom of the _animate.scss file" etc., and lists out some code.

First, this isn't true: there is no such code at the bottom of _animate.scss.

Second, this is baffling. I'm new to Sass, but I can't understand why there would be any reason to put this code into my main sass file. At most, I might put it in a separate sass file and import it into the main sass file. But why can't you just put this code in a module that's part of animate-sass?

I've started receiving many deprecation warnings similar to the following:

DEPRECATION WARNING: Passing (1s,), a non-string value, to unquote() will be an error in future versions of Sass.
DEPRECATION WARNING: Passing (fadeOutLeft,), a non-string value, to unquote() will be an error in future versions of Sass.

Hi,

I'm trying to use the library to assign animation to certain classes by default, for example, I want a specific animation to be applied to all modals.

However, I'm trying to avoid the needs to add 'animate pulse' to the markup anywhere a modal is displayed. One solution to this is to @extend .animate class in my modal class, however, we all know that @extend has issues and @mixin is preferred.

Is there any existing mixing to include the .animate rules in arbitrary sass classes, if not, would you accept a PR where _base defines an animate main and .animate class in base uses this mixing?

Thanks!

When using this library in conjunction with a package manager, such as Bower, I want to be able to provide configuration without modifying the code. This makes upgrading more straightforward.

Thankfully, Sass gives us a way to specify that variables have a default value: !default. This will allow consumers to set these values before importing, and then after importing their values will not be overridden.

Seems it's not possible to use CSS custom properties for setting the base duration.

I've created a PR which fixes this - #33

Thanks :)

Please update it to animate.css v4.1.1

Generated animation-name has a zoom-effect name in quotes, and it is not work.

Sample of CSS code after I turned on ZoomIn:

.zoomIn {
  -webkit-animation-name: "zoomIn";
  -o-animation-name: "zoomIn";
  animation-name: "zoomIn"; }

and it should be without quotes:

.zoomIn {
  -webkit-animation-name: zoomIn;
  -o-animation-name: zoomIn;
  animation-name: zoomIn; }

I see that the bug is in @include animate-prefixer(animation-name, $animate-name);. You have to change it on @include animate-prefixer(animation-name, #{$animate-name});.

I am using Firefox 39 / Windows 7.

Hello @tgdev
Please, can you take it to npm? I would like to use it with node_modules

In Microsoft Edge not work any effect.

Thank's for your job.

Hello im trying to use animate-sass in my project using gulp but the _animate.scss dont compile with my entire scripts in my css task. Any trick i have to do? Thank you

Hi, thanks for your great repo. I've installed the package with Bower, but ran into an issue that it wasn't pulling the latest commit code.

I specifically wanted the updated _settings.scss file with the !default added in. Is that latest commit ready for production, and if so, could you tag it? \

Right now I did a workaround by installing that specific commit's hash.

Thanks!

Hey Tom,

The version of this package on bower is quite a few behind this master branch, when you get some time would you be able to update this?

Building the source from the npm pacakge with sass gives a depreciation warning:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(-$base-degrees, 2) or calc(-$base-degrees / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │         80% { -webkit-transform: translateX(0%) skewX(-$base-degrees / 2); opacity: 1; }
  │                                                       ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/animate-sass/animations/lightspeed/_lightSpeedIn.scss 6:49  @import
    node_modules/animate-sass/_animate.scss 58:9