annexcss v1.4.2

@nnexCSS

AnnexCSS is a lightweight single-file pure CSS animation library made for use in a TBA React framework.

npm i annexcss

import 'annexcss'

You can easily add animations to your JSX or markup just like any regular CSS class

<div className="@fadeIn"> I love potato </div>

You can extend functionality by adding utility classes

<div className="@fadeIn flex">
  <div className="@fadeIn @delay-1s flex-none ...">
    01 Potato
  </div>
  <div className="@fadeIn @delay-2s flex-1 w-64 ...">
    02 Potato
  </div>
  <div className="@fadeIn @delay-3s flex-1 w-32 ...">
    03 Potato
  </div>
</div>

So how does it work? AnnexCSS first creates variables in :root to reuse as basic properties.

:root {

    --animate-repeat: 1;
    --animate-duration: 1s;
    --animate-delay: 1s;

}

It then wraps all elements (*) with required core properties for individual classes to function properly. All classes use this wrapper when applied. This is a core feature unique to AnnexCSS.

* {
  
    animation-duration: 1s;
    animation-duration: var(--animate-duration);
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: var(--animate-duration);
    -webkit-animation-duration: 1s;

}

In regards to browser compatibility AnnexCSS focuses entirely on webkit. Postcss with autoprefixer can assist you if you need to expand cross-compatibility. Classes typically look like this:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.\@fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

You can call the @keyframes directly in any class. Just make sure to declare the duration too.

.bounceHover:hover {

  animation: bounce; 
  animation-duration: 2s; 

}

And you can change variables to customize your animations. Make sure you use a backslash to escape the @ when cascading over the animation classes. All AnnexCSS classes use @ as a prefix.

.\@fadeIn {

  --animate-duration: 10s;
  
}

About

This library was originally compiled using a custom animate.css build so you may take notice of the simliar class names. Many of the "uncommon" classes were removed to simplify the class set and reduce build size as much as possible.

Using the animate.css package to compile annex.css was just a method to prefix and quickly iterate on commonly used CSS animation techniques for an accompanying JS framework.

Originally I wanted to use animate.css itself but it's getting a bit older now and had unneeded overhead for my use case.

There is one major core difference outside of the postcss scripts and size. AnnexCSS wraps all elements with required properties instead of individually applying them. This allows for cleaner markup. Instead of animateanimated animatefadeIn just for one animation, you just need @fadeIn etc.

AnnexCSS relies on webpack (or webpack-based frameworks) to clean unused properties/styles, minify, etc.

https://webpack.js.org/guides/tree-shaking/

If all else fails modern browsers typically clean up unused CSS on render too. Using all 70 animations on a single page without tree shaking only causes a single point drop in lighthouse performance scores. Universal selector properties always get cleaned up as well.

There are docs planned that will be released within the previously mentioned JS framework.