@casoon/atlas-styles 0.0.4 → 0.0.6

package/dist/animations.css

@@ -96,7 +96,7 @@
    ========================================================= */
 
 /* === ENTRANCE ANIMATIONS === */
-@keyframes csFadeIn, anim-fade-in {
+@keyframes csFadeIn {
   0% {
     opacity: 0;
   }
@@ -105,7 +105,25 @@
   }
 }
 
-@keyframes csFadeOut, anim-fade-out {
+@keyframes anim-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes csFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes anim-fade-out {
   0% {
     opacity: 1;
   }
@@ -114,7 +132,18 @@
   }
 }
 
-@keyframes csScaleIn, anim-scale-in {
+@keyframes csScaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes anim-scale-in {
   0% {
     opacity: 0;
     transform: scale(0.9);
@@ -125,7 +154,18 @@
   }
 }
 
-@keyframes csScaleOut, anim-scale-out {
+@keyframes csScaleOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes anim-scale-out {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -136,7 +176,7 @@
   }
 }
 
-@keyframes csSlideUp, anim-slide-up {
+@keyframes csSlideUp {
   0% {
     opacity: 0;
     transform: translateY(20px);
@@ -147,7 +187,29 @@
   }
 }
 
-@keyframes csSlideDown, anim-slide-down {
+@keyframes anim-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes anim-slide-down {
   0% {
     opacity: 0;
     transform: translateY(-20px);
@@ -158,7 +220,18 @@
   }
 }
 
-@keyframes csSlideLeft, anim-slide-left {
+@keyframes csSlideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-left {
   0% {
     opacity: 0;
     transform: translateX(20px);
@@ -169,7 +242,18 @@
   }
 }
 
-@keyframes csSlideRight, anim-slide-right {
+@keyframes csSlideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-right {
   0% {
     opacity: 0;
     transform: translateX(-20px);
@@ -180,7 +264,18 @@
   }
 }
 
-@keyframes csBlurIn, anim-blur-in {
+@keyframes csBlurIn {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes anim-blur-in {
   0% {
     opacity: 0;
     filter: blur(4px);
@@ -191,7 +286,18 @@
   }
 }
 
-@keyframes csBlurOut, anim-blur-out {
+@keyframes csBlurOut {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+@keyframes anim-blur-out {
   0% {
     opacity: 1;
     filter: blur(0);
@@ -202,7 +308,18 @@
   }
 }
 
-@keyframes csRotateIn, anim-rotate-in {
+@keyframes csRotateIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes anim-rotate-in {
   0% {
     opacity: 0;
     transform: rotate(-5deg);
@@ -247,7 +364,16 @@
 }
 
 /* === CONTINUOUS ANIMATIONS === */
-@keyframes csRotate, anim-rotate {
+@keyframes csRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes anim-rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -256,7 +382,17 @@
   }
 }
 
-@keyframes csPulse, anim-pulse {
+@keyframes csPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes anim-pulse {
   0%,
   100% {
     opacity: 1;
@@ -266,7 +402,17 @@
   }
 }
 
-@keyframes csBounce, anim-bounce {
+@keyframes csBounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+@keyframes anim-bounce {
   0%,
   100% {
     transform: translateY(0);
@@ -276,7 +422,20 @@
   }
 }
 
-@keyframes csWiggle, anim-wiggle {
+@keyframes csWiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes anim-wiggle {
   0%,
   100% {
     transform: rotate(0deg);

package/dist/index.css

@@ -112,7 +112,16 @@
    ========================================================= */
 
 /* === ENTRANCE ANIMATIONS === */
-@keyframes csFadeIn, anim-fade-in {
+@keyframes csFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes anim-fade-in {
   0% {
     opacity: 0;
   }
@@ -121,7 +130,7 @@
   }
 }
 
-@keyframes csFadeOut, anim-fade-out {
+@keyframes csFadeOut {
   0% {
     opacity: 1;
   }
@@ -130,7 +139,16 @@
   }
 }
 
-@keyframes csScaleIn, anim-scale-in {
+@keyframes anim-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes csScaleIn {
   0% {
     opacity: 0;
     transform: scale(0.9);
@@ -141,7 +159,29 @@
   }
 }
 
-@keyframes csScaleOut, anim-scale-out {
+@keyframes anim-scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes csScaleOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes anim-scale-out {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -152,7 +192,7 @@
   }
 }
 
-@keyframes csSlideUp, anim-slide-up {
+@keyframes csSlideUp {
   0% {
     opacity: 0;
     transform: translateY(20px);
@@ -163,7 +203,29 @@
   }
 }
 
-@keyframes csSlideDown, anim-slide-down {
+@keyframes anim-slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes csSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes anim-slide-down {
   0% {
     opacity: 0;
     transform: translateY(-20px);
@@ -174,7 +236,18 @@
   }
 }
 
-@keyframes csSlideLeft, anim-slide-left {
+@keyframes csSlideLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-left {
   0% {
     opacity: 0;
     transform: translateX(20px);
@@ -185,7 +258,18 @@
   }
 }
 
-@keyframes csSlideRight, anim-slide-right {
+@keyframes csSlideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes anim-slide-right {
   0% {
     opacity: 0;
     transform: translateX(-20px);
@@ -196,7 +280,7 @@
   }
 }
 
-@keyframes csBlurIn, anim-blur-in {
+@keyframes csBlurIn {
   0% {
     opacity: 0;
     filter: blur(4px);
@@ -207,7 +291,18 @@
   }
 }
 
-@keyframes csBlurOut, anim-blur-out {
+@keyframes anim-blur-in {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes csBlurOut {
   0% {
     opacity: 1;
     filter: blur(0);
@@ -218,7 +313,29 @@
   }
 }
 
-@keyframes csRotateIn, anim-rotate-in {
+@keyframes anim-blur-out {
+  0% {
+    opacity: 1;
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
+@keyframes csRotateIn {
+  0% {
+    opacity: 0;
+    transform: rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+@keyframes anim-rotate-in {
   0% {
     opacity: 0;
     transform: rotate(-5deg);
@@ -263,7 +380,7 @@
 }
 
 /* === CONTINUOUS ANIMATIONS === */
-@keyframes csRotate, anim-rotate {
+@keyframes csRotate {
   0% {
     transform: rotate(0deg);
   }
@@ -272,7 +389,26 @@
   }
 }
 
-@keyframes csPulse, anim-pulse {
+@keyframes anim-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes csPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes anim-pulse {
   0%,
   100% {
     opacity: 1;
@@ -282,7 +418,17 @@
   }
 }
 
-@keyframes csBounce, anim-bounce {
+@keyframes csBounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-25%);
+  }
+}
+
+@keyframes anim-bounce {
   0%,
   100% {
     transform: translateY(0);
@@ -292,7 +438,20 @@
   }
 }
 
-@keyframes csWiggle, anim-wiggle {
+@keyframes csWiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes anim-wiggle {
   0%,
   100% {
     transform: rotate(0deg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/atlas-styles",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
   "type": "module",
   "files": [