├── Banner.avif ├── CSS ├── catto.css └── catto.min.css ├── MIT License ├── README.md └── package.json /Banner.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Avalojandro/Catto-CSS/dd4abb81fdaf10def9e7583ca4429af0a4ea74b3/Banner.avif -------------------------------------------------------------------------------- /CSS/catto.css: -------------------------------------------------------------------------------- 1 | /* 2 | cattocss | 2024 | MIT License 3 | A project by: Avalojandro | https://github.com/Avalojandro/Catto-CSS 4 | */ 5 | 6 | /*******************************************************************************************/ 7 | 8 | /*HOVER ANIMATIONS*/ 9 | 10 | /*h-float*/ 11 | .h-float{ 12 | transition: .5s, color .10s; 13 | -webkit-transition: .5s, color .10s; 14 | -moz-transition: .5s, color .10s; 15 | } 16 | .h-float:hover{ 17 | box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000; 18 | transform: translate(0px,5px); 19 | -webkit-transform: translate(0px,5px); 20 | -moz-transform:translate(0px,5px); 21 | } 22 | 23 | /*h-rotate*/ 24 | .h-rotate-180{ 25 | transition: .5s, color .10s; 26 | -webkit-transition: .5s, color .10s; 27 | -moz-transition: .5s, color .10s; 28 | } 29 | .h-rotate-180:hover{ 30 | transform: rotate(180deg); 31 | -webkit-transform: rotate(180deg); 32 | -moz-transform: rotate(180deg); 33 | } 34 | .h-rotate-360{ 35 | transition: .5s, color .10s; 36 | -webkit-transition: .5s, color .10s; 37 | -moz-transition: .5s, color .10s; 38 | } 39 | .h-rotate-360:hover{ 40 | transform: rotateZ(360deg); 41 | -webkit-transform: rotateZ(360deg); 42 | -moz-transform: rotateZ(360deg); 43 | } 44 | 45 | /*h-flex*/ 46 | .h-flex{ 47 | transition: .5s, color .10s; 48 | -webkit-transition: .5s, color .10s; 49 | -moz-transition: .5s, color .10s; 50 | } 51 | .h-flex:hover{ 52 | transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0); 53 | -webkit-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0); 54 | -moz-transform: matrix(3.0, .5, 0, 1.0, 1.0, 1.0); 55 | } 56 | 57 | /*h-translate*/ 58 | .h-transLeft{ 59 | transition: .5s, color .10s; 60 | -webkit-transition: .5s, color .10s; 61 | -moz-transition: .5s, color .10s; 62 | } 63 | .h-transLeft:hover{ 64 | transform: translatex(-20px); 65 | -webkit-transform: translatex(-20px); 66 | -moz-transform: translatex(-20px); 67 | } 68 | .h-transRight{ 69 | transition: .5s, color .10s; 70 | -webkit-transition: .5s, color .10s; 71 | -moz-transition: .5s, color .10s; 72 | } 73 | .h-transRight:hover{ 74 | transform: translatex(20px); 75 | -webkit-transform: translatex(20px); 76 | -moz-transform: translatex(20px); 77 | } 78 | .h-transDown{ 79 | transition: .5s, color .10s; 80 | -webkit-transition: .5s, color .10s; 81 | -moz-transition: .5s, color .10s; 82 | } 83 | .h-transDown:hover{ 84 | transform: translatey(20px); 85 | -webkit-transform: translatey(20px); 86 | -moz-transform: translatey(20px); 87 | } 88 | .h-transUp{ 89 | transition: .5s, color .10s; 90 | -webkit-transition: .5s, color .10s; 91 | -moz-transition: .5s, color .10s; 92 | } 93 | .h-transUp:hover{ 94 | transform: translatey(-20px); 95 | -webkit-transform: translatey(-20px); 96 | -moz-transform: translatey(-20px); 97 | } 98 | 99 | /*h-tostretch*/ 100 | .h-toStretch{ 101 | transition: .5s, color .10s; 102 | -webkit-transition: .5s, color .10s; 103 | -moz-transition: .5s, color .10s; 104 | } 105 | .h-toStretch:hover{ 106 | transform: scale(2, 0.5); 107 | -webkit-transform: scale(1.2, 0.5); 108 | -moz-transform: scale(1.2, 0.5); 109 | } 110 | 111 | /*h-skew*/ 112 | .h-skew{ 113 | transition: .5s, color .10s; 114 | -webkit-transition: .5s, color .10s; 115 | -moz-transition: .5s, color .10s; 116 | } 117 | .h-skew:hover{ 118 | transform: skew(30deg, 20deg); 119 | -webkit-transform: skew(30deg, 20deg); 120 | -moz-transform: skew(30deg, 20deg); 121 | } 122 | .h-skewX{ 123 | transition: .5s, color .10s; 124 | -webkit-transition: .5s, color .10s; 125 | -moz-transition: .5s, color .10s; 126 | } 127 | .h-skewX:hover{ 128 | transform: skewX(30deg); 129 | -webkit-transform: skewX(30deg); 130 | -moz-transform: skewX(30deg); 131 | } 132 | .h-skewY{ 133 | transition: .5s, color .10s; 134 | -webkit-transition: .5s, color .10s; 135 | -moz-transition: .5s, color .10s; 136 | } 137 | .h-skewY:hover{ 138 | transform: skewY(1.07rad); 139 | -webkit-transform: skewY(15deg); 140 | -moz-transform: skewY(15deg); 141 | } 142 | 143 | /*h-float-fluid*/ 144 | .h-float-fluid{ 145 | transition: .5s, color .10s; 146 | -webkit-transition: .5s, color .10s; 147 | -moz-transition: .5s, color .10s; 148 | } 149 | .h-float-fluid:hover{ 150 | transform: translate3d(12px, 50%, 3em); 151 | -webkit-transform: translate3d(12px, 50%, 3em); 152 | -moz-transform: translate3d(12px, 50%, 3em); 153 | box-shadow: 0 8px 8px 0 #000000,0 8px 8px 0 #000000; 154 | } 155 | 156 | /*h-grow*/ 157 | .h-grow{ 158 | transition: .5s, color .10s; 159 | -webkit-transition: .5s, color .10s; 160 | -moz-transition: .5s, color .10s; 161 | } 162 | .h-grow:hover{ 163 | transform: scale3d(1.5, 1.5, 0.3); 164 | -webkit-transform: scale3d(1.5, 1.5, 0.3); 165 | -moz-transform: scale3d(1.5, 1.5, 0.3); 166 | } 167 | 168 | /*h-flip*/ 169 | .h-flipUp-360{ 170 | transition: .5s, color .10s; 171 | -webkit-transition: .5s, color .10s; 172 | -moz-transition: .5s, color .10s; 173 | } 174 | .h-flipUp-360:hover{ 175 | transform: rotateX(360deg); 176 | -webkit-transform: rotateX(360deg); 177 | -moz-transform: rotateX(360deg); 178 | } 179 | .h-flipUp-180{ 180 | transition: .5s, color .10s; 181 | -webkit-transition: .5s, color .10s; 182 | -moz-transition: .5s, color .10s; 183 | } 184 | .h-flipUp-180:hover{ 185 | transform: rotateX(180deg); 186 | -webkit-transform: rotateX(180deg); 187 | -moz-transform: rotateX(180deg); 188 | } 189 | .h-flipSide-180{ 190 | transition: .5s, color .10s; 191 | -webkit-transition: .5s, color .10s; 192 | -moz-transition: .5s, color .10s; 193 | } 194 | .h-flipSide-180:hover{ 195 | transform: rotateY(180deg); 196 | -webkit-transform: rotateY(180deg); 197 | -moz-transform: rotateY(180deg); 198 | } 199 | .h-flipSide-360{ 200 | transition: .5s, color .10s; 201 | -webkit-transition: .5s, color .10s; 202 | -moz-transition: .5s, color .10s; 203 | } 204 | .h-flipSide-360:hover{ 205 | transform: rotateY(360deg); 206 | -webkit-transform: rotateY(360deg); 207 | -moz-transform: rotateY(360deg); 208 | } 209 | 210 | /*h-shake*/ 211 | .h-shake:hover{ 212 | animation-name: shake; 213 | -webkit-animation-name: shake; 214 | -moz-animation-name: shake; 215 | animation-duration: 1s; 216 | -webkit-animation-duration: 1s; 217 | -moz-animation-duration: 1s; 218 | animation-iteration-count: infinite; 219 | -webkit-animation-iteration-count: infinite; 220 | -moz-animation-iteration-count: infinite; 221 | } 222 | 223 | @keyframes shake { 224 | 0% {transform: translate(1px, 1px) rotate(0deg);} 225 | 10% {transform: translate(-1px, -2px) rotate(-1deg);} 226 | 20% {transform: translate(-3px, 0px) rotate(1deg);} 227 | 30% {transform: translate(3px, 2px) rotate(0deg);} 228 | 40% {transform: translate(1px, -1px) rotate(1deg);} 229 | 50% {transform: translate(-1px, 2px) rotate(-1deg);} 230 | 60% {transform: translate(-3px, 1px) rotate(0deg);} 231 | 70% {transform: translate(3px, 1px) rotate(-1deg);} 232 | 80% {transform: translate(-1px, -1px) rotate(1deg);} 233 | 90% {transform: translate(1px, 2px) rotate(0deg);} 234 | 100% {transform: translate(1px, -2px) rotate(-1deg);} 235 | } 236 | 237 | .h-shakeFix:hover{ 238 | animation-name: shakefix; 239 | -webkit-animation-name: shakefix; 240 | -moz-animation-name: shakefix; 241 | animation-duration: 1s; 242 | -webkit-animation-duration: 1s; 243 | -moz-animation-duration: 1s; 244 | animation-iteration-count: infinite; 245 | -webkit-animation-iteration-count: infinite; 246 | -moz-animation-iteration-count: infinite; 247 | } 248 | 249 | @keyframes shakefix { 250 | 0% {transform: translate(1px, 1px);} 251 | 10% {transform: translate(-1px, -2px);} 252 | 20% {transform: translate(-3px, 0px);} 253 | 30% {transform: translate(3px, 2px);} 254 | 40% {transform: translate(1px, -1px);} 255 | 50% {transform: translate(-1px, 2px);} 256 | 60% {transform: translate(-3px, 1px);} 257 | 70% {transform: translate(3px, 1px);} 258 | 80% {transform: translate(-1px, -1px);} 259 | 90% {transform: translate(1px, 2px);} 260 | 100% {transform: translate(1px, -2px);} 261 | } 262 | 263 | .h-bounceShakeX:hover{ 264 | animation-name: bounce-shakeX; 265 | -webkit-animation-name: bounce-shakeX; 266 | -moz-animation-name: bounce-shakeX; 267 | animation-duration: 1s; 268 | -webkit-animation-duration: 1s; 269 | -moz-animation-duration: 1s; 270 | } 271 | 272 | @keyframes bounce-shakeX{ 273 | 0% {transform: translate(-50%,0px);} 274 | 12% {transform: translate(50%,0px);} 275 | 24% {transform: translate(-20%,0px);} 276 | 36% {transform: translate(20%,0px);} 277 | 48% {transform: translate(-10%,0px);} 278 | 60% {transform: translate(10%,0px);} 279 | 72% {transform: translate(-5%,0px);} 280 | 84% {transform: translate(5%,0px);} 281 | 96% {transform: translate(0%,0px);} 282 | 100% {transform: translate(0%,0px);} 283 | } 284 | 285 | .h-bounceShakeY:hover{ 286 | animation-name: bounce-shakeY; 287 | -webkit-animation-name: bounce-shakeY; 288 | -moz-animation-name: bounce-shakeY; 289 | animation-duration: 1s; 290 | -webkit-animation-duration: 1s; 291 | -moz-animation-duration: 1s; 292 | } 293 | 294 | @keyframes bounce-shakeY{ 295 | 0% {transform: translateY(-50%);} 296 | 12% {transform: translateY(50%);} 297 | 24% {transform: translateY(-20%);} 298 | 36% {transform: translateY(20%);} 299 | 48% {transform: translateY(-10%);} 300 | 60% {transform: translateY(10%);} 301 | 72% {transform: translateY(-5%);} 302 | 84% {transform: translateY(5%);} 303 | 96% {transform: translateY(0%);} 304 | 100% {transform: translateY(0%);} 305 | } 306 | 307 | .h-surprise:hover{ 308 | animation-name: surprise; 309 | -webkit-animation-name: surprise; 310 | -moz-animation-name: surprise; 311 | animation-duration: .8s; 312 | -webkit-animation-duration: .8s; 313 | -moz-animation-duration: .8s; 314 | } 315 | 316 | @keyframes surprise 317 | { 318 | 0% {transform: rotate(0deg) scale(1,1);;} 319 | 10% {transform: rotate(7deg) scale(2,2);} 320 | 20% {transform: rotate(-7deg) scale(2,2);} 321 | 30% {transform: rotate(7deg) scale(2,2);} 322 | 40% {transform: rotate(-7deg) scale(2,2);} 323 | 50% {transform: rotate(7deg) scale(2,2);} 324 | 60% {transform: rotate(-7deg) scale(2,2);} 325 | 70% {transform: rotate(7deg) scale(2,2);} 326 | 80% {transform: rotate(-7deg) scale(2,2);} 327 | 90% {transform: rotate(7deg) scale(2,2);} 328 | 100% {transform: rotate(0deg) scale(1,1);} 329 | } 330 | 331 | /*Jello*/ 332 | .h-jello:hover { 333 | animation-name: jello; 334 | -webkit-animation-name: jello; 335 | -moz-animation-name: jello; 336 | animation-duration: 1s; 337 | -webkit-animation-duration: 1s; 338 | -moz-animation-duration: 1s; 339 | transform-origin: center; 340 | -webkit-transform-origin: center; 341 | -moz-transform-origin: center; 342 | } 343 | 344 | @keyframes jello { 345 | from,11.1%,to {transform: translate3d(0, 0, 0);} 346 | 22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);} 347 | 33.3% {transform: skewX(6.25deg) skewY(6.25deg);} 348 | 44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);} 349 | 55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);} 350 | 66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);} 351 | 77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);} 352 | 88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);} 353 | } 354 | 355 | /*Swing*/ 356 | .h-swing:hover{ 357 | animation-name: swing; 358 | -webkit-animation-name: swing; 359 | -moz-animation-name: swing; 360 | animation-duration: 1s; 361 | -webkit-animation-duration: 1s; 362 | -moz-animation-duration: 1s; 363 | } 364 | 365 | @keyframes swing { 366 | 20% {transform: rotate3d(0, 0, 1, 15deg);} 367 | 40% {transform: rotate3d(0, 0, 1, -10deg);} 368 | 60% {transform: rotate3d(0, 0, 1, 5deg);} 369 | 80% {transform: rotate3d(0, 0, 1, -5deg);} 370 | to {transform: rotate3d(0, 0, 1, 0deg);} 371 | } 372 | 373 | /*INIFINITE ANIMATIONS*/ 374 | 375 | .i-shake{ 376 | animation-name: shake; 377 | -webkit-animation-name: shake; 378 | -moz-animation-name: shake; 379 | animation-duration: 1s; 380 | -webkit-animation-duration: 1s; 381 | -moz-animation-duration: 1s; 382 | animation-iteration-count: infinite; 383 | -webkit-animation-iteration-count: infinite; 384 | -moz-animation-iteration-count: infinite; 385 | } 386 | 387 | .i-pulse { 388 | animation-name: pulse; 389 | animation-duration: 1s; 390 | animation-iteration-count: infinite; 391 | } 392 | 393 | @keyframes pulse { 394 | 0% {transform: scale(1);} 395 | 50% {transform: scale(1.2);} 396 | 100% {transform: scale(1);} 397 | } 398 | 399 | .i-bounce { 400 | animation-name: bounce; 401 | animation-duration: 1s; 402 | animation-iteration-count: infinite; 403 | } 404 | 405 | @keyframes bounce { 406 | 0% {transform: translateY(0);} 407 | 50% {transform: translateY(-10px);} 408 | 100% {transform: translateY(0);} 409 | } 410 | 411 | .i-spin { 412 | animation-name: spin; 413 | animation-duration: 1s; 414 | animation-iteration-count: infinite; 415 | } 416 | 417 | @keyframes spin { 418 | from {transform: rotate(0deg);} 419 | to {transform: rotate(360deg);} 420 | } 421 | 422 | .i-heartbeat { 423 | animation-name: heartbeat; 424 | animation-duration: 1s; 425 | animation-iteration-count: infinite; 426 | } 427 | 428 | @keyframes heartbeat { 429 | 0% {transform: scale(1);} 430 | 25% {transform: scale(1.3);} 431 | 50% {transform: scale(1);} 432 | 75% {transform: scale(0.7);} 433 | 100% {transform: scale(1);} 434 | } 435 | 436 | .i-slide { 437 | animation-name: slide; 438 | animation-duration: 1s; 439 | animation-iteration-count: infinite; 440 | } 441 | 442 | @keyframes slide { 443 | 0% {transform: translateX(0);} 444 | 50% {transform: translateX(20px);} 445 | 100% {transform: translateX(0);} 446 | } 447 | 448 | .i-flicker { 449 | animation-name: flicker; 450 | animation-duration: 1s; 451 | animation-iteration-count: infinite; 452 | } 453 | 454 | @keyframes flicker { 455 | 0% {opacity: 1;} 456 | 25% {opacity: 0.5;} 457 | 50% {opacity: 1;} 458 | 75% {opacity: 0.5;} 459 | 100% {opacity: 1;} 460 | } 461 | 462 | .i-rotate { 463 | animation-name: rotate; 464 | animation-duration: 1s; 465 | animation-iteration-count: infinite; 466 | } 467 | 468 | @keyframes rotate { 469 | 0% {transform: rotate(0deg);} 470 | 100% {transform: rotate(360deg);} 471 | } 472 | 473 | .i-wobble { 474 | animation-name: wobble; 475 | animation-duration: 1s; 476 | animation-iteration-count: infinite; 477 | } 478 | 479 | @keyframes wobble { 480 | 0% {transform: translateX(0) rotate(0deg);} 481 | 15% {transform: translateX(-30px) rotate(-5deg);} 482 | 30% {transform: translateX(15px) rotate(3deg);} 483 | 45% {transform: translateX(-15px) rotate(-3deg);} 484 | 60% {transform: translateX(9px) rotate(2deg);} 485 | 75% {transform: translateX(-6px) rotate(-1deg);} 486 | 100% {transform: translateX(0) rotate(0deg);} 487 | } -------------------------------------------------------------------------------- /CSS/catto.min.css: -------------------------------------------------------------------------------- 1 | 2 | /*cattocss | 2024 | MIT License | 3 | A proyect by: Alejandro Avalos | https://github.com/Avalojandro/Catto-CSS */ 4 | 5 | /* This is a minified file, for a proper functioning of this code it is recommended not to modify 6 | this document, instead it is recommended to see the catto.css file */ 7 | /****************************************************************************************/ 8 | 9 | .h-float{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 10 | .h-float:hover{box-shadow:0 8px 8px 0 #000000,0 8px 8px 0 #000;transform:translate(0,5px);-webkit-transform:translate(0,5px);-moz-transform:translate(0,5px)} 11 | .h-rotate-180{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 12 | .h-rotate-180:hover{transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)} 13 | .h-rotate-360{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 14 | .h-rotate-360:hover{transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg)} 15 | .h-flex{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 16 | .h-flex:hover{transform:matrix(3,.5,0,1,1,1);-webkit-transform:matrix(3,.5,0,1,1,1);-moz-transform:matrix(3,.5,0,1,1,1)} 17 | .h-transLeft{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 18 | .h-transLeft:hover{transform:translatex(-20px);-webkit-transform:translatex(-20px);-moz-transform:translatex(-20px)} 19 | .h-transRight{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 20 | .h-transRight:hover{transform:translatex(20px);-webkit-transform:translatex(20px);-moz-transform:translatex(20px)} 21 | .h-transDown{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 22 | .h-transDown:hover{transform:translatey(20px);-webkit-transform:translatey(20px);-moz-transform:translatey(20px)} 23 | .h-transUp{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 24 | .h-transUp:hover{transform:translatey(-20px);-webkit-transform:translatey(-20px);-moz-transform:translatey(-20px)} 25 | .h-toStretch{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 26 | .h-toStretch:hover{transform:scale(2,.5);-webkit-transform:scale(1.2,.5);-moz-transform:scale(1.2,.5)} 27 | .h-skew{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 28 | .h-skew:hover{transform:skew(30deg,20deg);-webkit-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg)} 29 | .h-skewX{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 30 | .h-skewX:hover{transform:skewX(30deg);-webkit-transform:skewX(30deg);-moz-transform:skewX(30deg)} 31 | .h-skewY{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 32 | .h-skewY:hover{transform:skewY(1.07rad);-webkit-transform:skewY(15deg);-moz-transform:skewY(15deg)} 33 | .h-float-fluid{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 34 | .h-float-fluid:hover{transform:translate3d(12px,50%,3em);-webkit-transform:translate3d(12px,50%,3em);-moz-transform:translate3d(12px,50%,3em);box-shadow:0 8px 8px 0 #000000,0 8px 8px 0 #000} 35 | .h-grow{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 36 | .h-grow:hover{transform:scale3d(1.5,1.5,.3);-webkit-transform:scale3d(1.5,1.5,.3);-moz-transform:scale3d(1.5,1.5,.3)} 37 | .h-flipUp-360{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 38 | .h-flipUp-360:hover{transform:rotateX(360deg);-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg)} 39 | .h-flipUp-180{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 40 | .h-flipUp-180:hover{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg)} 41 | .h-flipSide-180{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 42 | .h-flipSide-180:hover{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg)} 43 | .h-flipSide-360{transition:.5s,color .10s;-webkit-transition:.5s,color .10s;-moz-transition:.5s,color .10s} 44 | .h-flipSide-360:hover{transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg)} 45 | .h-shake:hover{animation-name:shake;-webkit-animation-name:shake;-moz-animation-name:shake;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}100%{transform:translate(1px,-2px) rotate(-1deg)}} 46 | .h-shakeFix:hover{animation-name:shakefix;-webkit-animation-name:shakefix;-moz-animation-name:shakefix;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite}@keyframes shakefix{0%{transform:translate(1px,1px)}10%{transform:translate(-1px,-2px)}20%{transform:translate(-3px,0)}30%{transform:translate(3px,2px)}40%{transform:translate(1px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(-3px,1px)}70%{transform:translate(3px,1px)}80%{transform:translate(-1px,-1px)}90%{transform:translate(1px,2px)}100%{transform:translate(1px,-2px)}} 47 | .h-bounceShakeX:hover{animation-name:bounce-shakeX;-webkit-animation-name:bounce-shakeX;-moz-animation-name:bounce-shakeX;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s}@keyframes bounce-shakeX{0%{transform:translate(-50%,0)}12%{transform:translate(50%,0)}24%{transform:translate(-20%,0)}36%{transform:translate(20%,0)}48%{transform:translate(-10%,0)}60%{transform:translate(10%,0)}72%{transform:translate(-5%,0)}84%{transform:translate(5%,0)}96%{transform:translate(0%,0)}100%{transform:translate(0%,0)}} 48 | .h-bounceShakeY:hover{animation-name:bounce-shakeY;-webkit-animation-name:bounce-shakeY;-moz-animation-name:bounce-shakeY;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s}@keyframes bounce-shakeY{0%{transform:translateY(-50%)}12%{transform:translateY(50%)}24%{transform:translateY(-20%)}36%{transform:translateY(20%)}48%{transform:translateY(-10%)}60%{transform:translateY(10%)}72%{transform:translateY(-5%)}84%{transform:translateY(5%)}96%{transform:translateY(0%)}100%{transform:translateY(0%)}} 49 | .h-surprise:hover{animation-name:surprise;-webkit-animation-name:surprise;-moz-animation-name:surprise;animation-duration:.8s;-webkit-animation-duration:.8s;-moz-animation-duration:.8s}@keyframes surprise{0%{transform:rotate(0deg) scale(1,1);}10%{transform:rotate(7deg) scale(2,2)}20%{transform:rotate(-7deg) scale(2,2)}30%{transform:rotate(7deg) scale(2,2)}40%{transform:rotate(-7deg) scale(2,2)}50%{transform:rotate(7deg) scale(2,2)}60%{transform:rotate(-7deg) scale(2,2)}70%{transform:rotate(7deg) scale(2,2)}80%{transform:rotate(-7deg) scale(2,2)}90%{transform:rotate(7deg) scale(2,2)}100%{transform:rotate(0deg) scale(1,1)}} 50 | .h-jello:hover{animation-name:jello;-webkit-animation-name:jello;-moz-animation-name:jello;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;transform-origin:center;-webkit-transform-origin:center;-moz-transform-origin:center}@keyframes 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(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}} 51 | .h-swing:hover{animation-name:swing;-webkit-animation-name:swing;-moz-animation-name:swing;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s}@keyframes 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)}} 52 | .i-shake{animation-name:shake;-webkit-animation-name:shake;-moz-animation-name:shake;animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite} 53 | .i-pulse{animation-name:pulse;animation-duration:1s;animation-iteration-count:infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}} 54 | .i-bounce{animation-name:bounce;animation-duration:1s;animation-iteration-count:infinite}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}} 55 | .i-spin{animation-name:spin;animation-duration:1s;animation-iteration-count:infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} 56 | .i-heartbeat{animation-name:heartbeat;animation-duration:1s;animation-iteration-count:infinite}@keyframes heartbeat{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(1)}75%{transform:scale(.7)}100%{transform:scale(1)}} 57 | .i-slide{animation-name:slide;animation-duration:1s;animation-iteration-count:infinite}@keyframes slide{0%{transform:translateX(0)}50%{transform:translateX(20px)}100%{transform:translateX(0)}} 58 | .i-flicker{animation-name:flicker;animation-duration:1s;animation-iteration-count:infinite}@keyframes flicker{0%{opacity:1}25%{opacity:.5}50%{opacity:1}75%{opacity:.5}100%{opacity:1}} 59 | .i-rotate{animation-name:rotate;animation-duration:1s;animation-iteration-count:infinite}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} 60 | .i-wobble{animation-name:wobble;animation-duration:1s;animation-iteration-count:infinite}@keyframes wobble{0%{transform:translateX(0) rotate(0deg)}15%{transform:translateX(-30px) rotate(-5deg)}30%{transform:translateX(15px) rotate(3deg)}45%{transform:translateX(-15px) rotate(-3deg)}60%{transform:translateX(9px) rotate(2deg)}75%{transform:translateX(-6px) rotate(-1deg)}100%{transform:translateX(0) rotate(0deg)}} -------------------------------------------------------------------------------- /MIT License: -------------------------------------------------------------------------------- 1 | Copyright © 2020 Catto-CSS 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files \ 4 | (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, 5 | distribute, sublicense, and/or sell copies of the Software, and 6 | to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 11 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 12 | ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 13 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Banner](./Banner.avif) 2 | # Catto-CSS 3 | https://cattocss.com 4 | 5 | # How to use 6 | Choose and just copy the code! 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "catto-css", 3 | "version": "3.20.0", 4 | "description": "\"An open source CSS animation library with which you can add animations to your website\"", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "catto-css" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Avalojandro/Catto-CSS.git" 12 | }, 13 | "keywords": [ 14 | "catto-css" 15 | ], 16 | "author": "Avalojandro", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/Avalojandro/Catto-CSS/issues" 20 | }, 21 | "homepage": "https://github.com/Avalojandro/Catto-CSS#readme" 22 | } 23 | --------------------------------------------------------------------------------