@douyinfe/semi-animation-styled 2.1.0-alpha.0 → 2.1.0-beta.2

package/lib/es/src/_base.css

@@ -0,0 +1,87 @@
+/*
+* 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;
+}
+
+.semi-animated.semi-loop-1 {
+    animation-iteration-count: 1;
+}
+
+.semi-animated.semi-loop-2 {
+    animation-iteration-count: 2;
+}
+
+.semi-animated.semi-loop-3 {
+    animation-iteration-count: 3;
+}
+
+.semi-animated.semi-loop-4 {
+    animation-iteration-count: 4;
+}
+
+.semi-animated.semi-loop-5 {
+    animation-iteration-count: 5;
+}
+
+.semi-animated.semi-loop-infinite {
+    animation-iteration-count: infinite;
+}
+
+.semi-animated.semi-delay-0s {
+    animation-delay: 0s;
+}
+
+.semi-animated.semi-delay-1s {
+    animation-delay: 1s;
+}
+
+.semi-animated.semi-delay-2s {
+    animation-delay: 2s;
+}
+
+.semi-animated.semi-delay-3s {
+    animation-delay: 3s;
+}
+
+.semi-animated.semi-delay-4s {
+    animation-delay: 4s;
+}
+
+.semi-animated.semi-delay-5s {
+    animation-delay: 5s;
+}
+
+.semi-animated.semi-speed-default {
+    animation-duration: 1s;
+}
+
+.semi-animated.semi-speed-fast {
+    animation-duration: 800ms;
+}
+
+.semi-animated.semi-speed-faster {
+    animation-duration: 500ms;
+}
+
+.semi-animated.semi-speed-slow {
+    animation-duration: 2s;
+}
+
+.semi-animated.semi-speed-slower {
+    animation-duration: 3s;
+}
+
+@media (print), 
+    (prefers-reduced-motion: reduce) {
+    .semi-animated {
+        animation-duration: 1ms !important;
+        transition-duration: 1ms !important;
+        animation-iteration-count: 1 !important;
+    }
+}
+

package/lib/es/src/attention_seekers/bounce.css

@@ -0,0 +1,36 @@
+/*
+* 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%,
+    53%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+        transform: translate3d(0, 0, 0);
+    }
+
+    40%,
+    43% {
+        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+        transform: translate3d(0, -30px, 0);
+    }
+
+    70% {
+        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+        transform: translate3d(0, -15px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -4px, 0);
+    }
+}
+
+.semi-bounce {
+    animation-name: semi-bounce;
+    transform-origin: center bottom;
+}
+

package/lib/es/src/attention_seekers/flash.css

@@ -0,0 +1,22 @@
+/*
+* 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%,
+    to {
+        opacity: 1;
+    }
+
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+
+.semi-flash {
+    animation-name: semi-flash;
+}
+

package/lib/es/src/attention_seekers/headShake.css

@@ -0,0 +1,36 @@
+/*
+* 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);
+    }
+
+    6.5% {
+        transform: translateX(-6px) rotateY(-9deg);
+    }
+
+    18.5% {
+        transform: translateX(5px) rotateY(7deg);
+    }
+
+    31.5% {
+        transform: translateX(-3px) rotateY(-5deg);
+    }
+
+    43.5% {
+        transform: translateX(2px) rotateY(3deg);
+    }
+
+    50% {
+        transform: translateX(0);
+    }
+}
+
+.semi-headShake {
+    animation-timing-function: ease-in-out;
+    animation-name: semi-headShake;
+}
+

package/lib/es/src/attention_seekers/heartBeat.css

@@ -0,0 +1,33 @@
+/*
+* 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);
+    }
+
+    14% {
+        transform: scale(1.3);
+    }
+
+    28% {
+        transform: scale(1);
+    }
+
+    42% {
+        transform: scale(1.3);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+}
+
+.semi-heartBeat {
+    animation-name: semi-heartBeat;
+    animation-duration: 1.3s;
+    animation-timing-function: ease-in-out;
+}
+

package/lib/es/src/attention_seekers/jello.css

@@ -0,0 +1,46 @@
+/*
+* 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%,
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+
+    22.2% {
+        transform: skewX(-12.5deg) skewY(-12.5deg);
+    }
+
+    33.3% {
+        transform: skewX(6.25deg) skewY(6.25deg);
+    }
+
+    44.4% {
+        transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+
+    55.5% {
+        transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+
+    66.6% {
+        transform: skewX(-.78125deg) skewY(-.78125deg);
+    }
+
+    77.7% {
+        transform: skewX(.390625deg) skewY(.390625deg);
+    }
+
+    88.8% {
+        transform: skewX(-.1953125deg) skewY(-.1953125deg);
+    }
+}
+
+.semi-jello {
+    animation-name: semi-jello;
+    transform-origin: center;
+}
+

package/lib/es/src/attention_seekers/pulse.css

@@ -0,0 +1,25 @@
+/*
+* 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 {
+    from {
+        transform: scale3d(1, 1, 1);
+    }
+
+    50% {
+        transform: scale3d(1.05, 1.05, 1.05);
+    }
+
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.semi-pulse {
+    animation-name: semi-pulse;
+}
+

package/lib/es/src/attention_seekers/rubberBand.css

@@ -0,0 +1,39 @@
+/*
+* 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);
+    }
+
+    30% {
+        transform: scale3d(1.25, .75, 1);
+    }
+
+    40% {
+        transform: scale3d(.75, 1.25, 1);
+    }
+
+    50% {
+        transform: scale3d(1.15, .85, 1);
+    }
+
+    65% {
+        transform: scale3d(.95, 1.05, 1);
+    }
+
+    75% {
+        transform: scale3d(1.05, .95, 1);
+    }
+
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.semi-rubberBand {
+    animation-name: semi-rubberBand;
+}
+

package/lib/es/src/attention_seekers/shake.css

@@ -0,0 +1,31 @@
+/*
+* 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 {
+        transform: translate3d(0, 0, 0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+.semi-shake {
+    animation-name: semi-shake;
+}
+

package/lib/es/src/attention_seekers/swing.css

@@ -0,0 +1,32 @@
+/*
+* 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);
+    }
+
+    40% {
+        transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    60% {
+        transform: rotate3d(0, 0, 1, 5deg);
+    }
+
+    80% {
+        transform: rotate3d(0, 0, 1, -5deg);
+    }
+
+    to {
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+}
+
+.semi-swing {
+    transform-origin: top center;
+    animation-name: semi-swing;
+}
+

package/lib/es/src/attention_seekers/tada.css

@@ -0,0 +1,37 @@
+/*
+* 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);
+    }
+
+    10%,
+    20% {
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+
+    to {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.semi-tada {
+    animation-name: semi-tada;
+}
+

package/lib/es/src/attention_seekers/wobble.css

@@ -0,0 +1,41 @@
+/*
+* 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 {
+    from {
+        transform: translate3d(0, 0, 0);
+    }
+
+    15% {
+        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+
+    30% {
+        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+
+    45% {
+        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+
+    60% {
+        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+
+    75% {
+        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.semi-wobble {
+    animation-name: semi-wobble;
+}
+

package/lib/es/src/bouncing_entrances/bounceIn.css

@@ -0,0 +1,48 @@
+/*
+* 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%,
+    60%,
+    80%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    20% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+        transform: scale3d(.9, .9, .9);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+        transform: scale3d(.97, .97, .97);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.semi-bounceIn {
+    animation-duration: .75s;
+    animation-name: semi-bounceIn;
+}
+

package/lib/es/src/bouncing_entrances/bounceInDown.css

@@ -0,0 +1,41 @@
+/*
+* 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%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, -10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, 5px, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.semi-bounceInDown {
+    animation-name: semi-bounceInDown;
+}
+

package/lib/es/src/bouncing_entrances/bounceInLeft.css

@@ -0,0 +1,41 @@
+/*
+* 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%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.semi-bounceInLeft {
+    animation-name: semi-bounceInLeft;
+}
+

package/lib/es/src/bouncing_entrances/bounceInRight.css

@@ -0,0 +1,41 @@
+/*
+* 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%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.semi-bounceInRight {
+    animation-name: semi-bounceInRight;
+}
+

package/lib/es/src/bouncing_entrances/bounceInUp.css

@@ -0,0 +1,41 @@
+/*
+* 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%,
+    75%,
+    90%,
+    to {
+        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+    }
+
+    from {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -5px, 0);
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.semi-bounceInUp {
+    animation-name: semi-bounceInUp;
+}
+