Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Animate.cssNew to Visual Studio Code? Get it now.
Animate.css

Animate.css

Hridoy

|
20,537 installs
| (3) | Free
animate.css development toolkit
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Animate.css Development Toolkit

Now Updated for 3.5.21 release

This extension for Visual Studio Code adds snippets for Animate.css. More Snippets will be coming soon just release.

Use Extension

Contributors

Hridoy
Hridoy

See the CHANGELOG for the latest changes

Usage

animatecss- followed by an animation name as listed on Animate.css.

animatecss-bounceOutDown

Will generate:

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

...

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

Installation

  1. Install Visual Studio Code 1.10.0 or higher
  2. Launch Code
  3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
  4. Select Install Extension
  5. Choose the extension
  6. Reload Visual Studio Code
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft