chore: add source head to all css in semi-animation-styled

packages/semi-animation-styled/src/_base.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 .semi-animated {
     animation-duration: 1s;
     animation-fill-mode: both;
@@ -79,3 +84,4 @@
         animation-iteration-count: 1 !important;
     }
 }
+

packages/semi-animation-styled/src/attention_seekers/bounce.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounce {
     from,
     20%,
@@ -28,3 +33,4 @@
     animation-name: semi-bounce;
     transform-origin: center bottom;
 }
+

packages/semi-animation-styled/src/attention_seekers/flash.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flash {
     from,
     50%,
@@ -14,3 +19,4 @@
 .semi-flash {
     animation-name: semi-flash;
 }
+

packages/semi-animation-styled/src/attention_seekers/headShake.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-headShake {
     0% {
         transform: translateX(0);
@@ -28,3 +33,4 @@
     animation-timing-function: ease-in-out;
     animation-name: semi-headShake;
 }
+

packages/semi-animation-styled/src/attention_seekers/heartBeat.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-heartBeat {
     0% {
         transform: scale(1);
@@ -25,3 +30,4 @@
     animation-duration: 1.3s;
     animation-timing-function: ease-in-out;
 }
+

packages/semi-animation-styled/src/attention_seekers/jello.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-jello {
     from,
     11.1%,
@@ -38,3 +43,4 @@
     animation-name: semi-jello;
     transform-origin: center;
 }
+

packages/semi-animation-styled/src/attention_seekers/pulse.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-pulse {
@@ -17,3 +22,4 @@
 .semi-pulse {
     animation-name: semi-pulse;
 }
+

packages/semi-animation-styled/src/attention_seekers/rubberBand.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rubberBand {
     from {
         transform: scale3d(1, 1, 1);
@@ -31,3 +36,4 @@
 .semi-rubberBand {
     animation-name: semi-rubberBand;
 }
+

packages/semi-animation-styled/src/attention_seekers/shake.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-shake {
     from,
     to {
@@ -23,3 +28,4 @@
 .semi-shake {
     animation-name: semi-shake;
 }
+

packages/semi-animation-styled/src/attention_seekers/swing.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-swing {
     20% {
         transform: rotate3d(0, 0, 1, 15deg);
@@ -24,3 +29,4 @@
     transform-origin: top center;
     animation-name: semi-swing;
 }
+

packages/semi-animation-styled/src/attention_seekers/tada.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-tada {
     from {
         transform: scale3d(1, 1, 1);
@@ -29,3 +34,4 @@
 .semi-tada {
     animation-name: semi-tada;
 }
+

packages/semi-animation-styled/src/attention_seekers/wobble.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-wobble {
@@ -33,3 +38,4 @@
 .semi-wobble {
     animation-name: semi-wobble;
 }
+

packages/semi-animation-styled/src/bouncing_entrances/bounceIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceIn {
     from,
     20%,
@@ -40,3 +45,4 @@
     animation-duration: .75s;
     animation-name: semi-bounceIn;
 }
+

packages/semi-animation-styled/src/bouncing_entrances/bounceInDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceInDown {
     from,
     60%,
@@ -33,3 +38,4 @@
 .semi-bounceInDown {
     animation-name: semi-bounceInDown;
 }
+

packages/semi-animation-styled/src/bouncing_entrances/bounceInLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceInLeft {
     from,
     60%,
@@ -33,3 +38,4 @@
 .semi-bounceInLeft {
     animation-name: semi-bounceInLeft;
 }
+

packages/semi-animation-styled/src/bouncing_entrances/bounceInRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceInRight {
     from,
     60%,
@@ -33,3 +38,4 @@
 .semi-bounceInRight {
     animation-name: semi-bounceInRight;
 }
+

packages/semi-animation-styled/src/bouncing_entrances/bounceInUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceInUp {
     from,
     60%,
@@ -33,3 +38,4 @@
 .semi-bounceInUp {
     animation-name: semi-bounceInUp;
 }
+

packages/semi-animation-styled/src/bouncing_exits/bounceOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceOut {
     20% {
         transform: scale3d(.9, .9, .9);
@@ -19,3 +24,4 @@
     animation-duration: .75s;
     animation-name: semi-bounceOut;
 }
+

packages/semi-animation-styled/src/bouncing_exits/bounceOutDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceOutDown {
     20% {
         transform: translate3d(0, 10px, 0);
@@ -18,3 +23,4 @@
 .semi-bounceOutDown {
     animation-name: semi-bounceOutDown;
 }
+

packages/semi-animation-styled/src/bouncing_exits/bounceOutLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceOutLeft {
     20% {
         opacity: 1;
@@ -13,3 +18,4 @@
 .semi-bounceOutLeft {
     animation-name: semi-bounceOutLeft;
 }
+

packages/semi-animation-styled/src/bouncing_exits/bounceOutRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceOutRight {
     20% {
         opacity: 1;
@@ -13,3 +18,4 @@
 .semi-bounceOutRight {
     animation-name: semi-bounceOutRight;
 }
+

packages/semi-animation-styled/src/bouncing_exits/bounceOutUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-bounceOutUp {
     20% {
         transform: translate3d(0, -10px, 0);
@@ -18,3 +23,4 @@
 .semi-bounceOutUp {
     animation-name: semi-bounceOutUp;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeIn {
     from {
         opacity: 0;
@@ -11,3 +16,4 @@
 .semi-fadeIn {
     animation-name: semi-fadeIn;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInDown {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInDown {
     animation-name: semi-fadeInDown;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInDownBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInDownBig {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInDownBig {
     animation-name: semi-fadeInDownBig;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInLeft {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInLeft {
     animation-name: semi-fadeInLeft;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInLeftBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInLeftBig {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInLeftBig {
     animation-name: semi-fadeInLeftBig;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInRight {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInRight {
     animation-name: semi-fadeInRight;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInRightBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInRightBig {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInRightBig {
     animation-name: semi-fadeInRightBig;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInUp {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInUp {
     animation-name: semi-fadeInUp;
 }
+

packages/semi-animation-styled/src/fading_entrances/fadeInUpBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeInUpBig {
     from {
         opacity: 0;
@@ -13,3 +18,4 @@
 .semi-fadeInUpBig {
     animation-name: semi-fadeInUpBig;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOut {
     from {
         opacity: 1;
@@ -11,3 +16,4 @@
 .semi-fadeOut {
     animation-name: semi-fadeOut;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutDown {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutDown {
     animation-name: semi-fadeOutDown;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutDownBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutDownBig {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutDownBig {
     animation-name: semi-fadeOutDownBig;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutLeft {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutLeft {
     animation-name: semi-fadeOutLeft;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutLeftBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutLeftBig {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutLeftBig {
     animation-name: semi-fadeOutLeftBig;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutRight {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutRight {
     animation-name: semi-fadeOutRight;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutRightBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutRightBig {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutRightBig {
     animation-name: semi-fadeOutRightBig;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutUp {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutUp {
     animation-name: semi-fadeOutUp;
 }
+

packages/semi-animation-styled/src/fading_exits/fadeOutUpBig.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-fadeOutUpBig {
     from {
         opacity: 1;
@@ -12,3 +17,4 @@
 .semi-fadeOutUpBig {
     animation-name: semi-fadeOutUpBig;
 }
+

packages/semi-animation-styled/src/flippers/flip.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flip {
     from {
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
@@ -29,3 +34,4 @@
     backface-visibility: visible;
     animation-name: semi-flip;
 }
+

packages/semi-animation-styled/src/flippers/flipInX.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flipInX {
     from {
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
@@ -28,3 +33,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipInX;
 }
+

packages/semi-animation-styled/src/flippers/flipInY.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flipInY {
     from {
         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
@@ -28,3 +33,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipInY;
 }
+

packages/semi-animation-styled/src/flippers/flipOutX.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flipOutX {
     from {
         transform: perspective(400px);
@@ -19,3 +24,4 @@
     animation-name: semi-flipOutX;
     backface-visibility: visible !important;
 }
+

packages/semi-animation-styled/src/flippers/flipOutY.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-flipOutY {
     from {
         transform: perspective(400px);
@@ -19,3 +24,4 @@
     backface-visibility: visible !important;
     animation-name: semi-flipOutY;
 }
+

packages/semi-animation-styled/src/index.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @import './_base.css';
 
 @import './attention_seekers/bounce.css';
@@ -91,3 +96,4 @@
 @import './zooming_exits/zoomOutLeft.css';
 @import './zooming_exits/zoomOutRight.css';
 @import './zooming_exits/zoomOutUp.css';
+

packages/semi-animation-styled/src/lightspeed/lightSpeedIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-lightSpeedIn {
     from {
         transform: translate3d(100%, 0, 0) skewX(-30deg);
@@ -22,3 +27,4 @@
     animation-name: semi-lightSpeedIn;
     animation-timing-function: ease-out;
 }
+

packages/semi-animation-styled/src/lightspeed/lightSpeedOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-lightSpeedOut {
     from {
         opacity: 1;
@@ -13,3 +18,4 @@
     animation-name: semi-lightSpeedOut;
     animation-timing-function: ease-in;
 }
+

packages/semi-animation-styled/src/rotating_entrances/rotateIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateIn {
     from {
         transform-origin: center;
@@ -15,3 +20,4 @@
 .semi-rotateIn {
     animation-name: semi-rotateIn;
 }
+

packages/semi-animation-styled/src/rotating_entrances/rotateInDownLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateInDownLeft {
     from {
         transform-origin: left bottom;
@@ -15,3 +20,4 @@
 .semi-rotateInDownLeft {
     animation-name: semi-rotateInDownLeft;
 }
+

packages/semi-animation-styled/src/rotating_entrances/rotateInDownRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateInDownRight {
     from {
         transform-origin: right bottom;
@@ -15,3 +20,4 @@
 .semi-rotateInDownRight {
     animation-name: semi-rotateInDownRight;
 }
+

packages/semi-animation-styled/src/rotating_entrances/rotateInUpLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateInUpLeft {
     from {
         transform-origin: left bottom;
@@ -15,3 +20,4 @@
 .semi-rotateInUpLeft {
     animation-name: semi-rotateInUpLeft;
 }
+

packages/semi-animation-styled/src/rotating_entrances/rotateInUpRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateInUpRight {
     from {
         transform-origin: right bottom;
@@ -15,3 +20,4 @@
 .semi-rotateInUpRight {
     animation-name: semi-rotateInUpRight;
 }
+

packages/semi-animation-styled/src/rotating_exits/rotateOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateOut {
     from {
         transform-origin: center;
@@ -14,3 +19,4 @@
 .semi-rotateOut {
     animation-name: semi-rotateOut;
 }
+

packages/semi-animation-styled/src/rotating_exits/rotateOutDownLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateOutDownLeft {
     from {
         transform-origin: left bottom;
@@ -14,3 +19,4 @@
 .semi-rotateOutDownLeft {
     animation-name: semi-rotateOutDownLeft;
 }
+

packages/semi-animation-styled/src/rotating_exits/rotateOutDownRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateOutDownRight {
     from {
         transform-origin: right bottom;
@@ -14,3 +19,4 @@
 .semi-rotateOutDownRight {
     animation-name: semi-rotateOutDownRight;
 }
+

packages/semi-animation-styled/src/rotating_exits/rotateOutUpLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateOutUpLeft {
     from {
         transform-origin: left bottom;
@@ -14,3 +19,4 @@
 .semi-rotateOutUpLeft {
     animation-name: semi-rotateOutUpLeft;
 }
+

packages/semi-animation-styled/src/rotating_exits/rotateOutUpRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-rotateOutUpRight {
     from {
         transform-origin: right bottom;
@@ -14,3 +19,4 @@
 .semi-rotateOutUpRight {
     animation-name: semi-rotateOutUpRight;
 }
+

packages/semi-animation-styled/src/sliding_entrances/slideInDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideInDown {
     from {
         transform: translate3d(0, -100%, 0);
@@ -12,3 +17,4 @@
 .semi-slideInDown {
     animation-name: semi-slideInDown;
 }
+

packages/semi-animation-styled/src/sliding_entrances/slideInLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideInLeft {
     from {
         transform: translate3d(-100%, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideInLeft {
     animation-name: semi-slideInLeft;
 }
+

packages/semi-animation-styled/src/sliding_entrances/slideInRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideInRight {
     from {
         transform: translate3d(100%, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideInRight {
     animation-name: semi-slideInRight;
 }
+

packages/semi-animation-styled/src/sliding_entrances/slideInUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideInUp {
     from {
         transform: translate3d(0, 100%, 0);
@@ -12,3 +17,4 @@
 .semi-slideInUp {
     animation-name: semi-slideInUp;
 }
+

packages/semi-animation-styled/src/sliding_exits/slideOutDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideOutDown {
     from {
         transform: translate3d(0, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideOutDown {
     animation-name: semi-slideOutDown;
 }
+

packages/semi-animation-styled/src/sliding_exits/slideOutLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideOutLeft {
     from {
         transform: translate3d(0, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideOutLeft {
     animation-name: semi-slideOutLeft;
 }
+

packages/semi-animation-styled/src/sliding_exits/slideOutRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideOutRight {
     from {
         transform: translate3d(0, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideOutRight {
     animation-name: semi-slideOutRight;
 }
+

packages/semi-animation-styled/src/sliding_exits/slideOutUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-slideOutUp {
     from {
         transform: translate3d(0, 0, 0);
@@ -12,3 +17,4 @@
 .semi-slideOutUp {
     animation-name: semi-slideOutUp;
 }
+

packages/semi-animation-styled/src/specials/hinge.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-hinge {
     0% {
         transform-origin: top left;
@@ -29,3 +34,4 @@
     animation-duration: 2s;
     animation-name: semi-hinge;
 }
+

packages/semi-animation-styled/src/specials/jackInTheBox.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-jackInTheBox {
     from {
         opacity: 0;
@@ -22,3 +27,4 @@
 .semi-jackInTheBox {
     animation-name: semi-jackInTheBox;
 }
+

packages/semi-animation-styled/src/specials/rollIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-rollIn {
@@ -15,3 +20,4 @@
 .semi-rollIn {
     animation-name: semi-rollIn;
 }
+

packages/semi-animation-styled/src/specials/rollOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 @keyframes semi-rollOut {
@@ -14,3 +19,4 @@
 .semi-rollOut {
     animation-name: semi-rollOut;
 }
+

packages/semi-animation-styled/src/zooming_entrances/zoomIn.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomIn {
     from {
         opacity: 0;
@@ -12,3 +17,4 @@
 .semi-zoomIn {
     animation-name: semi-zoomIn;
 }
+

packages/semi-animation-styled/src/zooming_entrances/zoomInDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomInDown {
     from {
         opacity: 0;
@@ -15,3 +20,4 @@
 .semi-zoomInDown {
     animation-name: semi-zoomInDown;
 }
+

packages/semi-animation-styled/src/zooming_entrances/zoomInLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomInLeft {
     from {
         opacity: 0;
@@ -15,3 +20,4 @@
 .semi-zoomInLeft {
     animation-name: semi-zoomInLeft;
 }
+

packages/semi-animation-styled/src/zooming_entrances/zoomInRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomInRight {
     from {
         opacity: 0;
@@ -15,3 +20,4 @@
 .semi-zoomInRight {
     animation-name: semi-zoomInRight;
 }
+

packages/semi-animation-styled/src/zooming_entrances/zoomInUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomInUp {
     from {
         opacity: 0;
@@ -15,3 +20,4 @@
 .semi-zoomInUp {
     animation-name: semi-zoomInUp;
 }
+

packages/semi-animation-styled/src/zooming_exits/zoomOut.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomOut {
     from {
         opacity: 1;
@@ -16,3 +21,4 @@
 .semi-zoomOut {
     animation-name: semi-zoomOut;
 }
+

packages/semi-animation-styled/src/zooming_exits/zoomOutDown.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomOutDown {
     40% {
         opacity: 1;
@@ -16,3 +21,4 @@
 .semi-zoomOutDown {
     animation-name: semi-zoomOutDown;
 }
+

packages/semi-animation-styled/src/zooming_exits/zoomOutLeft.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomOutLeft {
     40% {
         opacity: 1;
@@ -14,3 +19,4 @@
 .semi-zoomOutLeft {
     animation-name: semi-zoomOutLeft;
 }
+

packages/semi-animation-styled/src/zooming_exits/zoomOutRight.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomOutRight {
     40% {
         opacity: 1;
@@ -14,3 +19,4 @@
 .semi-zoomOutRight {
     animation-name: semi-zoomOutRight;
 }
+

packages/semi-animation-styled/src/zooming_exits/zoomOutUp.css

@@ -1,3 +1,8 @@
+/*
+* Modified based on animate.css and added prefix name to prevent style conflicts
+* Reference: https://github.com/animate-css/animate.css
+*/
+
 @keyframes semi-zoomOutUp {
     40% {
         opacity: 1;
@@ -16,3 +21,4 @@
 .semi-zoomOutUp {
     animation-name: semi-zoomOutUp;
 }
+