API: Compiled CSS animation classes require "animated" class

[codeworksdev]

All pre-baked animation classes now require the animated class to be assigned before they take effect. This new rule minimizes conflicts with other CSS definitions (i.e., from other projects) while also providing a way to activate or deactivate an animation in action.

UPDATED DEFINITION

.animated when (@o_animateless_classless = false) {
    #a.animated();

    &.infinite           { #a.iterate(infinite);    }
    &.bounce             { #a.bounce();             }
    &.bounceIn           { #a.bounceIn();           }
    &.bounceInDown       { #a.bounceInDown();       }
    &.bounceInLeft       { #a.bounceInLeft();       }
    &.bounceInRight      { #a.bounceInRight();      }
    &.bounceInUp         { #a.bounceInUp();         }
    &.bounceOut          { #a.bounceOut();          }
    &.bounceOutDown      { #a.bounceOutDown();      }
    &.bounceOutLeft      { #a.bounceOutLeft();      }
    &.bounceOutRight     { #a.bounceOutRight();     }
    &.bounceOutUp        { #a.bounceOutUp();        }
    &.fadeIn             { #a.fadeIn();             }
    &.fadeInDown         { #a.fadeInDown();         }
    &.fadeInDownBig      { #a.fadeInDownBig();      }
    &.fadeInLeft         { #a.fadeInLeft();         }
    &.fadeInLeftBig      { #a.fadeInLeftBig();      }
    &.fadeInRight        { #a.fadeInRight();        }
    &.fadeInRightBig     { #a.fadeInRightBig();     }
    &.fadeInUp           { #a.fadeInUp();           }
    &.fadeInUpBig        { #a.fadeInUpBig();        }
    &.fadeOut            { #a.fadeOut();            }
    &.fadeOutDown        { #a.fadeOutDown();        }
    &.fadeOutDownBig     { #a.fadeOutDownBig();     }
    &.fadeOutLeft        { #a.fadeOutLeft();        }
    &.fadeOutLeftBig     { #a.fadeOutLeftBig();     }
    &.fadeOutRight       { #a.fadeOutRight();       }
    &.fadeOutRightBig    { #a.fadeOutRightBig();    }
    &.fadeOutUp          { #a.fadeOutUp();          }
    &.fadeOutUpBig       { #a.fadeOutUpBig();       }
    &.flash              { #a.flash();              }
    &.flashmin           { #a.flashmin();           }
    &.flip               { #a.flip();               }
    &.flipInX            { #a.flipInX();            }
    &.flipInY            { #a.flipInY();            }
    &.flipOutX           { #a.flipOutX();           }
    &.flipOutY           { #a.flipOutY();           }
    &.headShake          { #a.headShake();          }
    &.hinge              { #a.hinge();              }
    &.jackInTheBox       { #a.jackInTheBox();       }
    &.jello              { #a.jello();              }
    &.lightSpeedIn       { #a.lightSpeedIn();       }
    &.lightSpeedOut      { #a.lightSpeedOut();      }
    &.pulse              { #a.pulse();              }
    &.rollIn             { #a.rollIn();             }
    &.rollOut            { #a.rollOut();            }
    &.rotate             { #a.rotate();             }
    &.rotateCC           { #a.rotateCC();           }
    &.rotateIn           { #a.rotateIn();           }
    &.rotateInDownLeft   { #a.rotateInDownLeft();   }
    &.rotateInDownRight  { #a.rotateInDownRight();  }
    &.rotateInUpLeft     { #a.rotateInUpLeft();     }
    &.rotateInUpRight    { #a.rotateInUpRight();    }
    &.rotateOut          { #a.rotateOut();          }
    &.rotateOutDownLeft  { #a.rotateOutDownLeft();  }
    &.rotateOutDownRight { #a.rotateOutDownRight(); }
    &.rotateOutUpLeft    { #a.rotateOutUpLeft();    }
    &.rotateOutUpRight   { #a.rotateOutUpRight();   }
    &.rotateZoomIn       { #a.rotateZoomIn();       }
    &.rotateZoomInCC     { #a.rotateZoomInCC();     }
    &.rotateZoomOut      { #a.rotateZoomOut();      }
    &.rotateZoomOutCC    { #a.rotateZoomOutCC();    }
    &.rubberBand         { #a.rubberBand();         }
    &.shake              { #a.shake();              }
    &.slideInDown        { #a.slideInDown();        }
    &.slideInLeft        { #a.slideInLeft();        }
    &.slideInRight       { #a.slideInRight();       }
    &.slideInUp          { #a.slideInUp();          }
    &.slideOutDown       { #a.slideOutDown();       }
    &.slideOutLeft       { #a.slideOutLeft();       }
    &.slideOutRight      { #a.slideOutRight();      }
    &.slideOutUp         { #a.slideOutUp();         }
    &.swing              { #a.swing();              }
    &.tada               { #a.tada();               }
    &.wobble             { #a.wobble();             }
    &.zoomIn             { #a.zoomIn();             }
    &.zoomInDown         { #a.zoomInDown();         }
    &.zoomInLeft         { #a.zoomInLeft();         }
    &.zoomInRight        { #a.zoomInRight();        }
    &.zoomInUp           { #a.zoomInUp();           }
    &.zoomOut            { #a.zoomOut();            }
    &.zoomOutDown        { #a.zoomOutDown();        }
    &.zoomOutLeft        { #a.zoomOutLeft();        }
    &.zoomOutRight       { #a.zoomOutRight();       }
    &.zoomOutUp          { #a.zoomOutUp();          }
    }