├── ITCAMP.png
├── README.md
├── animate.css
├── animation.html
├── favicon.ico
├── fixed-position-mysaly.html
├── index.html
├── sahypa-qrcode.png
└── style.css


/ITCAMP.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rustem-garr/html-css-sapaklar/8e092bac6fe8ed5e98e47fe560abbb61084b8ebe/ITCAMP.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Aşakdaky ssylka basyp siz HTML, CSS we CSS Animasiýa işleýiş düzgünlerniň mysallarny görüp bilersiňiz: </br>
2 | https://rustem-garr.github.io/html-css-sapaklar/
3 | 
4 | Ýa-da şu asakdaky qrcode skan edip html-css-animasiýa sapaklar saýta geçip bilersiňiz:
5 | ![alt text](https://github.com/rustem-garr/html-css-sapaklar/blob/main/sahypa-qrcode.png?raw=true)
6 | 


--------------------------------------------------------------------------------
/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | /*!
   4 |  * animate.css -http://daneden.me/animate
   5 |  * Version - 3.5.2
   6 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
   7 |  *
   8 |  * Copyright (c) 2017 Daniel Eden
   9 |  */
  10 | 
  11 | .animated {
  12 |   animation-duration: 1s;
  13 |   animation-fill-mode: both;
  14 | }
  15 | 
  16 | .animated.infinite {
  17 |   animation-iteration-count: infinite;
  18 | }
  19 | 
  20 | .animated.hinge {
  21 |   animation-duration: 2s;
  22 | }
  23 | 
  24 | .animated.flipOutX,
  25 | .animated.flipOutY,
  26 | .animated.bounceIn,
  27 | .animated.bounceOut {
  28 |   animation-duration: .75s;
  29 | }
  30 | 
  31 | @keyframes bounce {
  32 |   from, 20%, 53%, 80%, to {
  33 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  34 |     transform: translate3d(0,0,0);
  35 |   }
  36 | 
  37 |   40%, 43% {
  38 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  39 |     transform: translate3d(0, -30px, 0);
  40 |   }
  41 | 
  42 |   70% {
  43 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  44 |     transform: translate3d(0, -15px, 0);
  45 |   }
  46 | 
  47 |   90% {
  48 |     transform: translate3d(0,-4px,0);
  49 |   }
  50 | }
  51 | 
  52 | .bounce {
  53 |   animation-name: bounce;
  54 |   transform-origin: center bottom;
  55 | }
  56 | 
  57 | @keyframes flash {
  58 |   from, 50%, to {
  59 |     opacity: 1;
  60 |   }
  61 | 
  62 |   25%, 75% {
  63 |     opacity: 0;
  64 |   }
  65 | }
  66 | 
  67 | .flash {
  68 |   animation-name: flash;
  69 | }
  70 | 
  71 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  72 | 
  73 | @keyframes pulse {
  74 |   from {
  75 |     transform: scale3d(1, 1, 1);
  76 |   }
  77 | 
  78 |   50% {
  79 |     transform: scale3d(1.05, 1.05, 1.05);
  80 |   }
  81 | 
  82 |   to {
  83 |     transform: scale3d(1, 1, 1);
  84 |   }
  85 | }
  86 | 
  87 | .pulse {
  88 |   animation-name: pulse;
  89 | }
  90 | 
  91 | @keyframes rubberBand {
  92 |   from {
  93 |     transform: scale3d(1, 1, 1);
  94 |   }
  95 | 
  96 |   30% {
  97 |     transform: scale3d(1.25, 0.75, 1);
  98 |   }
  99 | 
 100 |   40% {
 101 |     transform: scale3d(0.75, 1.25, 1);
 102 |   }
 103 | 
 104 |   50% {
 105 |     transform: scale3d(1.15, 0.85, 1);
 106 |   }
 107 | 
 108 |   65% {
 109 |     transform: scale3d(.95, 1.05, 1);
 110 |   }
 111 | 
 112 |   75% {
 113 |     transform: scale3d(1.05, .95, 1);
 114 |   }
 115 | 
 116 |   to {
 117 |     transform: scale3d(1, 1, 1);
 118 |   }
 119 | }
 120 | 
 121 | .rubberBand {
 122 |   animation-name: rubberBand;
 123 | }
 124 | 
 125 | @keyframes shake {
 126 |   from, to {
 127 |     transform: translate3d(0, 0, 0);
 128 |   }
 129 | 
 130 |   10%, 30%, 50%, 70%, 90% {
 131 |     transform: translate3d(-10px, 0, 0);
 132 |   }
 133 | 
 134 |   20%, 40%, 60%, 80% {
 135 |     transform: translate3d(10px, 0, 0);
 136 |   }
 137 | }
 138 | 
 139 | .shake {
 140 |   animation-name: shake;
 141 | }
 142 | 
 143 | @keyframes headShake {
 144 |   0% {
 145 |     transform: translateX(0);
 146 |   }
 147 | 
 148 |   6.5% {
 149 |     transform: translateX(-6px) rotateY(-9deg);
 150 |   }
 151 | 
 152 |   18.5% {
 153 |     transform: translateX(5px) rotateY(7deg);
 154 |   }
 155 | 
 156 |   31.5% {
 157 |     transform: translateX(-3px) rotateY(-5deg);
 158 |   }
 159 | 
 160 |   43.5% {
 161 |     transform: translateX(2px) rotateY(3deg);
 162 |   }
 163 | 
 164 |   50% {
 165 |     transform: translateX(0);
 166 |   }
 167 | }
 168 | 
 169 | .headShake {
 170 |   animation-timing-function: ease-in-out;
 171 |   animation-name: headShake;
 172 | }
 173 | 
 174 | @keyframes swing {
 175 |   20% {
 176 |     transform: rotate3d(0, 0, 1, 15deg);
 177 |   }
 178 | 
 179 |   40% {
 180 |     transform: rotate3d(0, 0, 1, -10deg);
 181 |   }
 182 | 
 183 |   60% {
 184 |     transform: rotate3d(0, 0, 1, 5deg);
 185 |   }
 186 | 
 187 |   80% {
 188 |     transform: rotate3d(0, 0, 1, -5deg);
 189 |   }
 190 | 
 191 |   to {
 192 |     transform: rotate3d(0, 0, 1, 0deg);
 193 |   }
 194 | }
 195 | 
 196 | .swing {
 197 |   transform-origin: top center;
 198 |   animation-name: swing;
 199 | }
 200 | 
 201 | @keyframes tada {
 202 |   from {
 203 |     transform: scale3d(1, 1, 1);
 204 |   }
 205 | 
 206 |   10%, 20% {
 207 |     transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 208 |   }
 209 | 
 210 |   30%, 50%, 70%, 90% {
 211 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 212 |   }
 213 | 
 214 |   40%, 60%, 80% {
 215 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 216 |   }
 217 | 
 218 |   to {
 219 |     transform: scale3d(1, 1, 1);
 220 |   }
 221 | }
 222 | 
 223 | .tada {
 224 |   animation-name: tada;
 225 | }
 226 | 
 227 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 228 | 
 229 | @keyframes wobble {
 230 |   from {
 231 |     transform: none;
 232 |   }
 233 | 
 234 |   15% {
 235 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 236 |   }
 237 | 
 238 |   30% {
 239 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 240 |   }
 241 | 
 242 |   45% {
 243 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 244 |   }
 245 | 
 246 |   60% {
 247 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 248 |   }
 249 | 
 250 |   75% {
 251 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 252 |   }
 253 | 
 254 |   to {
 255 |     transform: none;
 256 |   }
 257 | }
 258 | 
 259 | .wobble {
 260 |   animation-name: wobble;
 261 | }
 262 | 
 263 | @keyframes jello {
 264 |   from, 11.1%, to {
 265 |     transform: none;
 266 |   }
 267 | 
 268 |   22.2% {
 269 |     transform: skewX(-12.5deg) skewY(-12.5deg);
 270 |   }
 271 | 
 272 |   33.3% {
 273 |     transform: skewX(6.25deg) skewY(6.25deg);
 274 |   }
 275 | 
 276 |   44.4% {
 277 |     transform: skewX(-3.125deg) skewY(-3.125deg);
 278 |   }
 279 | 
 280 |   55.5% {
 281 |     transform: skewX(1.5625deg) skewY(1.5625deg);
 282 |   }
 283 | 
 284 |   66.6% {
 285 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
 286 |   }
 287 | 
 288 |   77.7% {
 289 |     transform: skewX(0.390625deg) skewY(0.390625deg);
 290 |   }
 291 | 
 292 |   88.8% {
 293 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 294 |   }
 295 | }
 296 | 
 297 | .jello {
 298 |   animation-name: jello;
 299 |   transform-origin: center;
 300 | }
 301 | 
 302 | @keyframes bounceIn {
 303 |   from, 20%, 40%, 60%, 80%, to {
 304 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 305 |   }
 306 | 
 307 |   0% {
 308 |     opacity: 0;
 309 |     transform: scale3d(.3, .3, .3);
 310 |   }
 311 | 
 312 |   20% {
 313 |     transform: scale3d(1.1, 1.1, 1.1);
 314 |   }
 315 | 
 316 |   40% {
 317 |     transform: scale3d(.9, .9, .9);
 318 |   }
 319 | 
 320 |   60% {
 321 |     opacity: 1;
 322 |     transform: scale3d(1.03, 1.03, 1.03);
 323 |   }
 324 | 
 325 |   80% {
 326 |     transform: scale3d(.97, .97, .97);
 327 |   }
 328 | 
 329 |   to {
 330 |     opacity: 1;
 331 |     transform: scale3d(1, 1, 1);
 332 |   }
 333 | }
 334 | 
 335 | .bounceIn {
 336 |   animation-name: bounceIn;
 337 | }
 338 | 
 339 | @keyframes bounceInDown {
 340 |   from, 60%, 75%, 90%, to {
 341 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 342 |   }
 343 | 
 344 |   0% {
 345 |     opacity: 0;
 346 |     transform: translate3d(0, -3000px, 0);
 347 |   }
 348 | 
 349 |   60% {
 350 |     opacity: 1;
 351 |     transform: translate3d(0, 25px, 0);
 352 |   }
 353 | 
 354 |   75% {
 355 |     transform: translate3d(0, -10px, 0);
 356 |   }
 357 | 
 358 |   90% {
 359 |     transform: translate3d(0, 5px, 0);
 360 |   }
 361 | 
 362 |   to {
 363 |     transform: none;
 364 |   }
 365 | }
 366 | 
 367 | .bounceInDown {
 368 |   animation-name: bounceInDown;
 369 | }
 370 | 
 371 | @keyframes bounceInLeft {
 372 |   from, 60%, 75%, 90%, to {
 373 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 374 |   }
 375 | 
 376 |   0% {
 377 |     opacity: 0;
 378 |     transform: translate3d(-3000px, 0, 0);
 379 |   }
 380 | 
 381 |   60% {
 382 |     opacity: 1;
 383 |     transform: translate3d(25px, 0, 0);
 384 |   }
 385 | 
 386 |   75% {
 387 |     transform: translate3d(-10px, 0, 0);
 388 |   }
 389 | 
 390 |   90% {
 391 |     transform: translate3d(5px, 0, 0);
 392 |   }
 393 | 
 394 |   to {
 395 |     transform: none;
 396 |   }
 397 | }
 398 | 
 399 | .bounceInLeft {
 400 |   animation-name: bounceInLeft;
 401 | }
 402 | 
 403 | @keyframes bounceInRight {
 404 |   from, 60%, 75%, 90%, to {
 405 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 406 |   }
 407 | 
 408 |   from {
 409 |     opacity: 0;
 410 |     transform: translate3d(3000px, 0, 0);
 411 |   }
 412 | 
 413 |   60% {
 414 |     opacity: 1;
 415 |     transform: translate3d(-25px, 0, 0);
 416 |   }
 417 | 
 418 |   75% {
 419 |     transform: translate3d(10px, 0, 0);
 420 |   }
 421 | 
 422 |   90% {
 423 |     transform: translate3d(-5px, 0, 0);
 424 |   }
 425 | 
 426 |   to {
 427 |     transform: none;
 428 |   }
 429 | }
 430 | 
 431 | .bounceInRight {
 432 |   animation-name: bounceInRight;
 433 | }
 434 | 
 435 | @keyframes bounceInUp {
 436 |   from, 60%, 75%, 90%, to {
 437 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 438 |   }
 439 | 
 440 |   from {
 441 |     opacity: 0;
 442 |     transform: translate3d(0, 3000px, 0);
 443 |   }
 444 | 
 445 |   60% {
 446 |     opacity: 1;
 447 |     transform: translate3d(0, -20px, 0);
 448 |   }
 449 | 
 450 |   75% {
 451 |     transform: translate3d(0, 10px, 0);
 452 |   }
 453 | 
 454 |   90% {
 455 |     transform: translate3d(0, -5px, 0);
 456 |   }
 457 | 
 458 |   to {
 459 |     transform: translate3d(0, 0, 0);
 460 |   }
 461 | }
 462 | 
 463 | .bounceInUp {
 464 |   animation-name: bounceInUp;
 465 | }
 466 | 
 467 | @keyframes bounceOut {
 468 |   20% {
 469 |     transform: scale3d(.9, .9, .9);
 470 |   }
 471 | 
 472 |   50%, 55% {
 473 |     opacity: 1;
 474 |     transform: scale3d(1.1, 1.1, 1.1);
 475 |   }
 476 | 
 477 |   to {
 478 |     opacity: 0;
 479 |     transform: scale3d(.3, .3, .3);
 480 |   }
 481 | }
 482 | 
 483 | .bounceOut {
 484 |   animation-name: bounceOut;
 485 | }
 486 | 
 487 | @keyframes bounceOutDown {
 488 |   20% {
 489 |     transform: translate3d(0, 10px, 0);
 490 |   }
 491 | 
 492 |   40%, 45% {
 493 |     opacity: 1;
 494 |     transform: translate3d(0, -20px, 0);
 495 |   }
 496 | 
 497 |   to {
 498 |     opacity: 0;
 499 |     transform: translate3d(0, 2000px, 0);
 500 |   }
 501 | }
 502 | 
 503 | .bounceOutDown {
 504 |   animation-name: bounceOutDown;
 505 | }
 506 | 
 507 | @keyframes bounceOutLeft {
 508 |   20% {
 509 |     opacity: 1;
 510 |     transform: translate3d(20px, 0, 0);
 511 |   }
 512 | 
 513 |   to {
 514 |     opacity: 0;
 515 |     transform: translate3d(-2000px, 0, 0);
 516 |   }
 517 | }
 518 | 
 519 | .bounceOutLeft {
 520 |   animation-name: bounceOutLeft;
 521 | }
 522 | 
 523 | @keyframes bounceOutRight {
 524 |   20% {
 525 |     opacity: 1;
 526 |     transform: translate3d(-20px, 0, 0);
 527 |   }
 528 | 
 529 |   to {
 530 |     opacity: 0;
 531 |     transform: translate3d(2000px, 0, 0);
 532 |   }
 533 | }
 534 | 
 535 | .bounceOutRight {
 536 |   animation-name: bounceOutRight;
 537 | }
 538 | 
 539 | @keyframes bounceOutUp {
 540 |   20% {
 541 |     transform: translate3d(0, -10px, 0);
 542 |   }
 543 | 
 544 |   40%, 45% {
 545 |     opacity: 1;
 546 |     transform: translate3d(0, 20px, 0);
 547 |   }
 548 | 
 549 |   to {
 550 |     opacity: 0;
 551 |     transform: translate3d(0, -2000px, 0);
 552 |   }
 553 | }
 554 | 
 555 | .bounceOutUp {
 556 |   animation-name: bounceOutUp;
 557 | }
 558 | 
 559 | @keyframes fadeIn {
 560 |   from {
 561 |     opacity: 0;
 562 |   }
 563 | 
 564 |   to {
 565 |     opacity: 1;
 566 |   }
 567 | }
 568 | 
 569 | .fadeIn {
 570 |   animation-name: fadeIn;
 571 | }
 572 | 
 573 | @keyframes fadeInDown {
 574 |   from {
 575 |     opacity: 0;
 576 |     transform: translate3d(0, -100%, 0);
 577 |   }
 578 | 
 579 |   to {
 580 |     opacity: 1;
 581 |     transform: none;
 582 |   }
 583 | }
 584 | 
 585 | .fadeInDown {
 586 |   animation-name: fadeInDown;
 587 | }
 588 | 
 589 | @keyframes fadeInDownBig {
 590 |   from {
 591 |     opacity: 0;
 592 |     transform: translate3d(0, -2000px, 0);
 593 |   }
 594 | 
 595 |   to {
 596 |     opacity: 1;
 597 |     transform: none;
 598 |   }
 599 | }
 600 | 
 601 | .fadeInDownBig {
 602 |   animation-name: fadeInDownBig;
 603 | }
 604 | 
 605 | @keyframes fadeInLeft {
 606 |   from {
 607 |     opacity: 0;
 608 |     transform: translate3d(-100%, 0, 0);
 609 |   }
 610 | 
 611 |   to {
 612 |     opacity: 1;
 613 |     transform: none;
 614 |   }
 615 | }
 616 | 
 617 | .fadeInLeft {
 618 |   animation-name: fadeInLeft;
 619 | }
 620 | 
 621 | @keyframes fadeInLeftBig {
 622 |   from {
 623 |     opacity: 0;
 624 |     transform: translate3d(-2000px, 0, 0);
 625 |   }
 626 | 
 627 |   to {
 628 |     opacity: 1;
 629 |     transform: none;
 630 |   }
 631 | }
 632 | 
 633 | .fadeInLeftBig {
 634 |   animation-name: fadeInLeftBig;
 635 | }
 636 | 
 637 | @keyframes fadeInRight {
 638 |   from {
 639 |     opacity: 0;
 640 |     transform: translate3d(100%, 0, 0);
 641 |   }
 642 | 
 643 |   to {
 644 |     opacity: 1;
 645 |     transform: none;
 646 |   }
 647 | }
 648 | 
 649 | .fadeInRight {
 650 |   animation-name: fadeInRight;
 651 | }
 652 | 
 653 | @keyframes fadeInRightBig {
 654 |   from {
 655 |     opacity: 0;
 656 |     transform: translate3d(2000px, 0, 0);
 657 |   }
 658 | 
 659 |   to {
 660 |     opacity: 1;
 661 |     transform: none;
 662 |   }
 663 | }
 664 | 
 665 | .fadeInRightBig {
 666 |   animation-name: fadeInRightBig;
 667 | }
 668 | 
 669 | @keyframes fadeInUp {
 670 |   from {
 671 |     opacity: 0;
 672 |     transform: translate3d(0, 100%, 0);
 673 |   }
 674 | 
 675 |   to {
 676 |     opacity: 1;
 677 |     transform: none;
 678 |   }
 679 | }
 680 | 
 681 | .fadeInUp {
 682 |   animation-name: fadeInUp;
 683 | }
 684 | 
 685 | @keyframes fadeInUpBig {
 686 |   from {
 687 |     opacity: 0;
 688 |     transform: translate3d(0, 2000px, 0);
 689 |   }
 690 | 
 691 |   to {
 692 |     opacity: 1;
 693 |     transform: none;
 694 |   }
 695 | }
 696 | 
 697 | .fadeInUpBig {
 698 |   animation-name: fadeInUpBig;
 699 | }
 700 | 
 701 | @keyframes fadeOut {
 702 |   from {
 703 |     opacity: 1;
 704 |   }
 705 | 
 706 |   to {
 707 |     opacity: 0;
 708 |   }
 709 | }
 710 | 
 711 | .fadeOut {
 712 |   animation-name: fadeOut;
 713 | }
 714 | 
 715 | @keyframes fadeOutDown {
 716 |   from {
 717 |     opacity: 1;
 718 |   }
 719 | 
 720 |   to {
 721 |     opacity: 0;
 722 |     transform: translate3d(0, 100%, 0);
 723 |   }
 724 | }
 725 | 
 726 | .fadeOutDown {
 727 |   animation-name: fadeOutDown;
 728 | }
 729 | 
 730 | @keyframes fadeOutDownBig {
 731 |   from {
 732 |     opacity: 1;
 733 |   }
 734 | 
 735 |   to {
 736 |     opacity: 0;
 737 |     transform: translate3d(0, 2000px, 0);
 738 |   }
 739 | }
 740 | 
 741 | .fadeOutDownBig {
 742 |   animation-name: fadeOutDownBig;
 743 | }
 744 | 
 745 | @keyframes fadeOutLeft {
 746 |   from {
 747 |     opacity: 1;
 748 |   }
 749 | 
 750 |   to {
 751 |     opacity: 0;
 752 |     transform: translate3d(-100%, 0, 0);
 753 |   }
 754 | }
 755 | 
 756 | .fadeOutLeft {
 757 |   animation-name: fadeOutLeft;
 758 | }
 759 | 
 760 | @keyframes fadeOutLeftBig {
 761 |   from {
 762 |     opacity: 1;
 763 |   }
 764 | 
 765 |   to {
 766 |     opacity: 0;
 767 |     transform: translate3d(-2000px, 0, 0);
 768 |   }
 769 | }
 770 | 
 771 | .fadeOutLeftBig {
 772 |   animation-name: fadeOutLeftBig;
 773 | }
 774 | 
 775 | @keyframes fadeOutRight {
 776 |   from {
 777 |     opacity: 1;
 778 |   }
 779 | 
 780 |   to {
 781 |     opacity: 0;
 782 |     transform: translate3d(100%, 0, 0);
 783 |   }
 784 | }
 785 | 
 786 | .fadeOutRight {
 787 |   animation-name: fadeOutRight;
 788 | }
 789 | 
 790 | @keyframes fadeOutRightBig {
 791 |   from {
 792 |     opacity: 1;
 793 |   }
 794 | 
 795 |   to {
 796 |     opacity: 0;
 797 |     transform: translate3d(2000px, 0, 0);
 798 |   }
 799 | }
 800 | 
 801 | .fadeOutRightBig {
 802 |   animation-name: fadeOutRightBig;
 803 | }
 804 | 
 805 | @keyframes fadeOutUp {
 806 |   from {
 807 |     opacity: 1;
 808 |   }
 809 | 
 810 |   to {
 811 |     opacity: 0;
 812 |     transform: translate3d(0, -100%, 0);
 813 |   }
 814 | }
 815 | 
 816 | .fadeOutUp {
 817 |   animation-name: fadeOutUp;
 818 | }
 819 | 
 820 | @keyframes fadeOutUpBig {
 821 |   from {
 822 |     opacity: 1;
 823 |   }
 824 | 
 825 |   to {
 826 |     opacity: 0;
 827 |     transform: translate3d(0, -2000px, 0);
 828 |   }
 829 | }
 830 | 
 831 | .fadeOutUpBig {
 832 |   animation-name: fadeOutUpBig;
 833 | }
 834 | 
 835 | @keyframes flip {
 836 |   from {
 837 |     transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 838 |     animation-timing-function: ease-out;
 839 |   }
 840 | 
 841 |   40% {
 842 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 843 |     animation-timing-function: ease-out;
 844 |   }
 845 | 
 846 |   50% {
 847 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 848 |     animation-timing-function: ease-in;
 849 |   }
 850 | 
 851 |   80% {
 852 |     transform: perspective(400px) scale3d(.95, .95, .95);
 853 |     animation-timing-function: ease-in;
 854 |   }
 855 | 
 856 |   to {
 857 |     transform: perspective(400px);
 858 |     animation-timing-function: ease-in;
 859 |   }
 860 | }
 861 | 
 862 | .animated.flip {
 863 |   -webkit-backface-visibility: visible;
 864 |   backface-visibility: visible;
 865 |   animation-name: flip;
 866 | }
 867 | 
 868 | @keyframes flipInX {
 869 |   from {
 870 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 871 |     animation-timing-function: ease-in;
 872 |     opacity: 0;
 873 |   }
 874 | 
 875 |   40% {
 876 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 877 |     animation-timing-function: ease-in;
 878 |   }
 879 | 
 880 |   60% {
 881 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 882 |     opacity: 1;
 883 |   }
 884 | 
 885 |   80% {
 886 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 887 |   }
 888 | 
 889 |   to {
 890 |     transform: perspective(400px);
 891 |   }
 892 | }
 893 | 
 894 | .flipInX {
 895 |   -webkit-backface-visibility: visible !important;
 896 |   backface-visibility: visible !important;
 897 |   animation-name: flipInX;
 898 | }
 899 | 
 900 | @keyframes flipInY {
 901 |   from {
 902 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 903 |     animation-timing-function: ease-in;
 904 |     opacity: 0;
 905 |   }
 906 | 
 907 |   40% {
 908 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 909 |     animation-timing-function: ease-in;
 910 |   }
 911 | 
 912 |   60% {
 913 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 914 |     opacity: 1;
 915 |   }
 916 | 
 917 |   80% {
 918 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 919 |   }
 920 | 
 921 |   to {
 922 |     transform: perspective(400px);
 923 |   }
 924 | }
 925 | 
 926 | .flipInY {
 927 |   -webkit-backface-visibility: visible !important;
 928 |   backface-visibility: visible !important;
 929 |   animation-name: flipInY;
 930 | }
 931 | 
 932 | @keyframes flipOutX {
 933 |   from {
 934 |     transform: perspective(400px);
 935 |   }
 936 | 
 937 |   30% {
 938 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 939 |     opacity: 1;
 940 |   }
 941 | 
 942 |   to {
 943 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 944 |     opacity: 0;
 945 |   }
 946 | }
 947 | 
 948 | .flipOutX {
 949 |   animation-name: flipOutX;
 950 |   -webkit-backface-visibility: visible !important;
 951 |   backface-visibility: visible !important;
 952 | }
 953 | 
 954 | @keyframes flipOutY {
 955 |   from {
 956 |     transform: perspective(400px);
 957 |   }
 958 | 
 959 |   30% {
 960 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 961 |     opacity: 1;
 962 |   }
 963 | 
 964 |   to {
 965 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 966 |     opacity: 0;
 967 |   }
 968 | }
 969 | 
 970 | .flipOutY {
 971 |   -webkit-backface-visibility: visible !important;
 972 |   backface-visibility: visible !important;
 973 |   animation-name: flipOutY;
 974 | }
 975 | 
 976 | @keyframes lightSpeedIn {
 977 |   from {
 978 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
 979 |     opacity: 0;
 980 |   }
 981 | 
 982 |   60% {
 983 |     transform: skewX(20deg);
 984 |     opacity: 1;
 985 |   }
 986 | 
 987 |   80% {
 988 |     transform: skewX(-5deg);
 989 |     opacity: 1;
 990 |   }
 991 | 
 992 |   to {
 993 |     transform: none;
 994 |     opacity: 1;
 995 |   }
 996 | }
 997 | 
 998 | .lightSpeedIn {
 999 |   animation-name: lightSpeedIn;
1000 |   animation-timing-function: ease-out;
1001 | }
1002 | 
1003 | @keyframes lightSpeedOut {
1004 |   from {
1005 |     opacity: 1;
1006 |   }
1007 | 
1008 |   to {
1009 |     transform: translate3d(100%, 0, 0) skewX(30deg);
1010 |     opacity: 0;
1011 |   }
1012 | }
1013 | 
1014 | .lightSpeedOut {
1015 |   animation-name: lightSpeedOut;
1016 |   animation-timing-function: ease-in;
1017 | }
1018 | 
1019 | @keyframes rotateIn {
1020 |   from {
1021 |     transform-origin: center;
1022 |     transform: rotate3d(0, 0, 1, -200deg);
1023 |     opacity: 0;
1024 |   }
1025 | 
1026 |   to {
1027 |     transform-origin: center;
1028 |     transform: none;
1029 |     opacity: 1;
1030 |   }
1031 | }
1032 | 
1033 | .rotateIn {
1034 |   animation-name: rotateIn;
1035 | }
1036 | 
1037 | @keyframes rotateInDownLeft {
1038 |   from {
1039 |     transform-origin: left bottom;
1040 |     transform: rotate3d(0, 0, 1, -45deg);
1041 |     opacity: 0;
1042 |   }
1043 | 
1044 |   to {
1045 |     transform-origin: left bottom;
1046 |     transform: none;
1047 |     opacity: 1;
1048 |   }
1049 | }
1050 | 
1051 | .rotateInDownLeft {
1052 |   animation-name: rotateInDownLeft;
1053 | }
1054 | 
1055 | @keyframes rotateInDownRight {
1056 |   from {
1057 |     transform-origin: right bottom;
1058 |     transform: rotate3d(0, 0, 1, 45deg);
1059 |     opacity: 0;
1060 |   }
1061 | 
1062 |   to {
1063 |     transform-origin: right bottom;
1064 |     transform: none;
1065 |     opacity: 1;
1066 |   }
1067 | }
1068 | 
1069 | .rotateInDownRight {
1070 |   animation-name: rotateInDownRight;
1071 | }
1072 | 
1073 | @keyframes rotateInUpLeft {
1074 |   from {
1075 |     transform-origin: left bottom;
1076 |     transform: rotate3d(0, 0, 1, 45deg);
1077 |     opacity: 0;
1078 |   }
1079 | 
1080 |   to {
1081 |     transform-origin: left bottom;
1082 |     transform: none;
1083 |     opacity: 1;
1084 |   }
1085 | }
1086 | 
1087 | .rotateInUpLeft {
1088 |   animation-name: rotateInUpLeft;
1089 | }
1090 | 
1091 | @keyframes rotateInUpRight {
1092 |   from {
1093 |     transform-origin: right bottom;
1094 |     transform: rotate3d(0, 0, 1, -90deg);
1095 |     opacity: 0;
1096 |   }
1097 | 
1098 |   to {
1099 |     transform-origin: right bottom;
1100 |     transform: none;
1101 |     opacity: 1;
1102 |   }
1103 | }
1104 | 
1105 | .rotateInUpRight {
1106 |   animation-name: rotateInUpRight;
1107 | }
1108 | 
1109 | @keyframes rotateOut {
1110 |   from {
1111 |     transform-origin: center;
1112 |     opacity: 1;
1113 |   }
1114 | 
1115 |   to {
1116 |     transform-origin: center;
1117 |     transform: rotate3d(0, 0, 1, 200deg);
1118 |     opacity: 0;
1119 |   }
1120 | }
1121 | 
1122 | .rotateOut {
1123 |   animation-name: rotateOut;
1124 | }
1125 | 
1126 | @keyframes rotateOutDownLeft {
1127 |   from {
1128 |     transform-origin: left bottom;
1129 |     opacity: 1;
1130 |   }
1131 | 
1132 |   to {
1133 |     transform-origin: left bottom;
1134 |     transform: rotate3d(0, 0, 1, 45deg);
1135 |     opacity: 0;
1136 |   }
1137 | }
1138 | 
1139 | .rotateOutDownLeft {
1140 |   animation-name: rotateOutDownLeft;
1141 | }
1142 | 
1143 | @keyframes rotateOutDownRight {
1144 |   from {
1145 |     transform-origin: right bottom;
1146 |     opacity: 1;
1147 |   }
1148 | 
1149 |   to {
1150 |     transform-origin: right bottom;
1151 |     transform: rotate3d(0, 0, 1, -45deg);
1152 |     opacity: 0;
1153 |   }
1154 | }
1155 | 
1156 | .rotateOutDownRight {
1157 |   animation-name: rotateOutDownRight;
1158 | }
1159 | 
1160 | @keyframes rotateOutUpLeft {
1161 |   from {
1162 |     transform-origin: left bottom;
1163 |     opacity: 1;
1164 |   }
1165 | 
1166 |   to {
1167 |     transform-origin: left bottom;
1168 |     transform: rotate3d(0, 0, 1, -45deg);
1169 |     opacity: 0;
1170 |   }
1171 | }
1172 | 
1173 | .rotateOutUpLeft {
1174 |   animation-name: rotateOutUpLeft;
1175 | }
1176 | 
1177 | @keyframes rotateOutUpRight {
1178 |   from {
1179 |     transform-origin: right bottom;
1180 |     opacity: 1;
1181 |   }
1182 | 
1183 |   to {
1184 |     transform-origin: right bottom;
1185 |     transform: rotate3d(0, 0, 1, 90deg);
1186 |     opacity: 0;
1187 |   }
1188 | }
1189 | 
1190 | .rotateOutUpRight {
1191 |   animation-name: rotateOutUpRight;
1192 | }
1193 | 
1194 | @keyframes hinge {
1195 |   0% {
1196 |     transform-origin: top left;
1197 |     animation-timing-function: ease-in-out;
1198 |   }
1199 | 
1200 |   20%, 60% {
1201 |     transform: rotate3d(0, 0, 1, 80deg);
1202 |     transform-origin: top left;
1203 |     animation-timing-function: ease-in-out;
1204 |   }
1205 | 
1206 |   40%, 80% {
1207 |     transform: rotate3d(0, 0, 1, 60deg);
1208 |     transform-origin: top left;
1209 |     animation-timing-function: ease-in-out;
1210 |     opacity: 1;
1211 |   }
1212 | 
1213 |   to {
1214 |     transform: translate3d(0, 700px, 0);
1215 |     opacity: 0;
1216 |   }
1217 | }
1218 | 
1219 | .hinge {
1220 |   animation-name: hinge;
1221 | }
1222 | 
1223 | @keyframes jackInTheBox {
1224 |   from {
1225 |     opacity: 0;
1226 |     transform: scale(0.1) rotate(30deg);
1227 |     transform-origin: center bottom;
1228 |   }
1229 | 
1230 |   50% {
1231 |     transform: rotate(-10deg);
1232 |   }
1233 | 
1234 |   70% {
1235 |     transform: rotate(3deg);
1236 |   }
1237 | 
1238 |   to {
1239 |     opacity: 1;
1240 |     transform: scale(1);
1241 |   }
1242 | }
1243 | 
1244 | .jackInTheBox {
1245 |   animation-name: jackInTheBox;
1246 | }
1247 | 
1248 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1249 | 
1250 | @keyframes rollIn {
1251 |   from {
1252 |     opacity: 0;
1253 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
1254 |   }
1255 | 
1256 |   to {
1257 |     opacity: 1;
1258 |     transform: none;
1259 |   }
1260 | }
1261 | 
1262 | .rollIn {
1263 |   animation-name: rollIn;
1264 | }
1265 | 
1266 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
1267 | 
1268 | @keyframes rollOut {
1269 |   from {
1270 |     opacity: 1;
1271 |   }
1272 | 
1273 |   to {
1274 |     opacity: 0;
1275 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
1276 |   }
1277 | }
1278 | 
1279 | .rollOut {
1280 |   animation-name: rollOut;
1281 | }
1282 | 
1283 | @keyframes zoomIn {
1284 |   from {
1285 |     opacity: 0;
1286 |     transform: scale3d(.3, .3, .3);
1287 |   }
1288 | 
1289 |   50% {
1290 |     opacity: 1;
1291 |   }
1292 | }
1293 | 
1294 | .zoomIn {
1295 |   animation-name: zoomIn;
1296 | }
1297 | 
1298 | @keyframes zoomInDown {
1299 |   from {
1300 |     opacity: 0;
1301 |     transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1302 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1303 |   }
1304 | 
1305 |   60% {
1306 |     opacity: 1;
1307 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1308 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1309 |   }
1310 | }
1311 | 
1312 | .zoomInDown {
1313 |   animation-name: zoomInDown;
1314 | }
1315 | 
1316 | @keyframes zoomInLeft {
1317 |   from {
1318 |     opacity: 0;
1319 |     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
1320 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1321 |   }
1322 | 
1323 |   60% {
1324 |     opacity: 1;
1325 |     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
1326 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1327 |   }
1328 | }
1329 | 
1330 | .zoomInLeft {
1331 |   animation-name: zoomInLeft;
1332 | }
1333 | 
1334 | @keyframes zoomInRight {
1335 |   from {
1336 |     opacity: 0;
1337 |     transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
1338 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1339 |   }
1340 | 
1341 |   60% {
1342 |     opacity: 1;
1343 |     transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
1344 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1345 |   }
1346 | }
1347 | 
1348 | .zoomInRight {
1349 |   animation-name: zoomInRight;
1350 | }
1351 | 
1352 | @keyframes zoomInUp {
1353 |   from {
1354 |     opacity: 0;
1355 |     transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
1356 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1357 |   }
1358 | 
1359 |   60% {
1360 |     opacity: 1;
1361 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1362 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1363 |   }
1364 | }
1365 | 
1366 | .zoomInUp {
1367 |   animation-name: zoomInUp;
1368 | }
1369 | 
1370 | @keyframes zoomOut {
1371 |   from {
1372 |     opacity: 1;
1373 |   }
1374 | 
1375 |   50% {
1376 |     opacity: 0;
1377 |     transform: scale3d(.3, .3, .3);
1378 |   }
1379 | 
1380 |   to {
1381 |     opacity: 0;
1382 |   }
1383 | }
1384 | 
1385 | .zoomOut {
1386 |   animation-name: zoomOut;
1387 | }
1388 | 
1389 | @keyframes zoomOutDown {
1390 |   40% {
1391 |     opacity: 1;
1392 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
1393 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1394 |   }
1395 | 
1396 |   to {
1397 |     opacity: 0;
1398 |     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
1399 |     transform-origin: center bottom;
1400 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1401 |   }
1402 | }
1403 | 
1404 | .zoomOutDown {
1405 |   animation-name: zoomOutDown;
1406 | }
1407 | 
1408 | @keyframes zoomOutLeft {
1409 |   40% {
1410 |     opacity: 1;
1411 |     transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
1412 |   }
1413 | 
1414 |   to {
1415 |     opacity: 0;
1416 |     transform: scale(.1) translate3d(-2000px, 0, 0);
1417 |     transform-origin: left center;
1418 |   }
1419 | }
1420 | 
1421 | .zoomOutLeft {
1422 |   animation-name: zoomOutLeft;
1423 | }
1424 | 
1425 | @keyframes zoomOutRight {
1426 |   40% {
1427 |     opacity: 1;
1428 |     transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
1429 |   }
1430 | 
1431 |   to {
1432 |     opacity: 0;
1433 |     transform: scale(.1) translate3d(2000px, 0, 0);
1434 |     transform-origin: right center;
1435 |   }
1436 | }
1437 | 
1438 | .zoomOutRight {
1439 |   animation-name: zoomOutRight;
1440 | }
1441 | 
1442 | @keyframes zoomOutUp {
1443 |   40% {
1444 |     opacity: 1;
1445 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1446 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1447 |   }
1448 | 
1449 |   to {
1450 |     opacity: 0;
1451 |     transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
1452 |     transform-origin: center bottom;
1453 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1454 |   }
1455 | }
1456 | 
1457 | .zoomOutUp {
1458 |   animation-name: zoomOutUp;
1459 | }
1460 | 
1461 | @keyframes slideInDown {
1462 |   from {
1463 |     transform: translate3d(0, -100%, 0);
1464 |     visibility: visible;
1465 |   }
1466 | 
1467 |   to {
1468 |     transform: translate3d(0, 0, 0);
1469 |   }
1470 | }
1471 | 
1472 | .slideInDown {
1473 |   animation-name: slideInDown;
1474 | }
1475 | 
1476 | @keyframes slideInLeft {
1477 |   from {
1478 |     transform: translate3d(-100%, 0, 0);
1479 |     visibility: visible;
1480 |   }
1481 | 
1482 |   to {
1483 |     transform: translate3d(0, 0, 0);
1484 |   }
1485 | }
1486 | 
1487 | .slideInLeft {
1488 |   animation-name: slideInLeft;
1489 | }
1490 | 
1491 | @keyframes slideInRight {
1492 |   from {
1493 |     transform: translate3d(100%, 0, 0);
1494 |     visibility: visible;
1495 |   }
1496 | 
1497 |   to {
1498 |     transform: translate3d(0, 0, 0);
1499 |   }
1500 | }
1501 | 
1502 | .slideInRight {
1503 |   animation-name: slideInRight;
1504 | }
1505 | 
1506 | @keyframes slideInUp {
1507 |   from {
1508 |     transform: translate3d(0, 100%, 0);
1509 |     visibility: visible;
1510 |   }
1511 | 
1512 |   to {
1513 |     transform: translate3d(0, 0, 0);
1514 |   }
1515 | }
1516 | 
1517 | .slideInUp {
1518 |   animation-name: slideInUp;
1519 | }
1520 | 
1521 | @keyframes slideOutDown {
1522 |   from {
1523 |     transform: translate3d(0, 0, 0);
1524 |   }
1525 | 
1526 |   to {
1527 |     visibility: hidden;
1528 |     transform: translate3d(0, 100%, 0);
1529 |   }
1530 | }
1531 | 
1532 | .slideOutDown {
1533 |   animation-name: slideOutDown;
1534 | }
1535 | 
1536 | @keyframes slideOutLeft {
1537 |   from {
1538 |     transform: translate3d(0, 0, 0);
1539 |   }
1540 | 
1541 |   to {
1542 |     visibility: hidden;
1543 |     transform: translate3d(-100%, 0, 0);
1544 |   }
1545 | }
1546 | 
1547 | .slideOutLeft {
1548 |   animation-name: slideOutLeft;
1549 | }
1550 | 
1551 | @keyframes slideOutRight {
1552 |   from {
1553 |     transform: translate3d(0, 0, 0);
1554 |   }
1555 | 
1556 |   to {
1557 |     visibility: hidden;
1558 |     transform: translate3d(100%, 0, 0);
1559 |   }
1560 | }
1561 | 
1562 | .slideOutRight {
1563 |   animation-name: slideOutRight;
1564 | }
1565 | 
1566 | @keyframes slideOutUp {
1567 |   from {
1568 |     transform: translate3d(0, 0, 0);
1569 |   }
1570 | 
1571 |   to {
1572 |     visibility: hidden;
1573 |     transform: translate3d(0, -100%, 0);
1574 |   }
1575 | }
1576 | 
1577 | .slideOutUp {
1578 |   animation-name: slideOutUp;
1579 | }
1580 | 


--------------------------------------------------------------------------------
/animation.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | 
   4 | <head>
   5 |     <title>Animation and Transitions</title>
   6 |     <link href="style.css" type="text/css" rel="stylesheet">
   7 |     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
   8 |     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
   9 |     <link href="animate.css" type="text/css" rel="stylesheet">
  10 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11 |     <meta charset="utf-8">
  12 |     <link rel="icon" href="favicon.ico">
  13 | </head>
  14 | 
  15 | <body>
  16 |     <nav>
  17 |         <ul class="left">
  18 |             <li>
  19 |                 <a href="index.html#html">HTML - mysallar</a>
  20 |             </li>
  21 |             <li>
  22 |                 <a href="index.html#css">CSS - mysallar</a>
  23 |             </li>
  24 |             <li>
  25 |                 <a href="animation.html#animation">Animasiýa</a>
  26 |             </li>
  27 |         </ul>
  28 |         <ul class="right">
  29 |             <li>
  30 |                 <a href="#" target="_blank" rel="noopener noreferrer">
  31 |                     <img class="social-logo" src="ITCAMP.png">
  32 |                 </a>
  33 |             </li>
  34 |         </ul>
  35 |     </nav>
  36 |     <section id="animation-transitions">
  37 |         <h1>Animation and Transitions</h1>
  38 |         <section id="transition-template">
  39 |             <h2>Transition template</h2>
  40 |             <div class="snippet transition span-8">
  41 |                 <h2>Transition all properties</h2>
  42 |                 <div class="codeblock">
  43 |                     <code>.element {</code>
  44 |                     <code>  transition: 1s all;</code>
  45 |                     <code>  </code>
  46 |                     <code>  /* Add other properties such as transform, margin, etc. */</code>
  47 |                     <code>}</code>
  48 |                 </div>
  49 |             </div>
  50 |         </section>
  51 |         <section id="transition-css">
  52 |             <h2>Transitions</h2>
  53 |             <h3>Different states may be defined using pseudo-classes like
  54 |                 <span class="code">:hover</span> or
  55 |                 <span class="code">:active</span> or dynamically set using JavaScript.</h3>
  56 |             <div class="snippet transition">
  57 |                 <h2 class="code">transition-duration:</h2>
  58 |                 <div class="codeblock">
  59 |                     <div class="ex-transition">
  60 |                         <div class="box" style="transition-duration: 0.7s;"></div>
  61 |                     </div>
  62 |                     <code>0.7s;</code>
  63 |                 </div>
  64 |                 <div class="codeblock">
  65 |                     <div class="ex-transition">
  66 |                         <div class="box" style="transition-duration: 1s;"></div>
  67 |                     </div>
  68 |                     <code>1s;</code>
  69 |                 </div>
  70 |                 <div class="codeblock">
  71 |                     <div class="ex-transition">
  72 |                         <div class="box" style="transition-duration: 2s;"></div>
  73 |                     </div>
  74 |                     <code>2s;</code>
  75 |                 </div>
  76 |                 <div class="codeblock">
  77 |                     <div class="ex-transition">
  78 |                         <div class="box" style="transition-duration: 3s;"></div>
  79 |                     </div>
  80 |                     <code>3s;</code>
  81 |                 </div>
  82 |             </div>
  83 |             <div class="snippet span-5 transition">
  84 |                 <h2 class="code">transition-timing-function:</h2>
  85 |                 <div class="ex-transition-timing-function">
  86 |                     <div class="codeblock">
  87 |                         <div class="ex-transition">
  88 |                             <div class="box" style="transition-timing-function: linear;"></div>
  89 |                         </div>
  90 |                         <code>linear;</code>
  91 |                     </div>
  92 |                     <div class="codeblock">
  93 |                         <div class="ex-transition">
  94 |                             <div class="box" style="transition-timing-function: ease;"></div>
  95 |                         </div>
  96 |                         <code>ease;</code>
  97 |                     </div>
  98 |                     <div class="codeblock">
  99 |                         <div class="ex-transition">
 100 |                             <div class="box" style="transition-timing-function: ease-in;"></div>
 101 |                         </div>
 102 |                         <code>ease-in;</code>
 103 |                     </div>
 104 |                     <div class="codeblock">
 105 |                         <div class="ex-transition">
 106 |                             <div class="box" style="transition-timing-function: ease-out;"></div>
 107 |                         </div>
 108 |                         <code>ease-out;</code>
 109 |                     </div>
 110 |                     <div class="codeblock">
 111 |                         <div class="ex-transition">
 112 |                             <div class="box" style="transition-timing-function: ease-in-out;"></div>
 113 |                         </div>
 114 |                         <code>ease-in-out;</code>
 115 |                     </div>
 116 |                     <div class="codeblock">
 117 |                         <div class="ex-transition">
 118 |                             <div class="box" style="transition-timing-function: steps(4);"></div>
 119 |                         </div>
 120 |                         <code>steps(4);</code>
 121 |                     </div>
 122 |                     <div class="codeblock">
 123 |                         <div class="ex-transition">
 124 |                             <div class="box" style="transition-timing-function: steps(10);"></div>
 125 |                         </div>
 126 |                         <code>steps(10);</code>
 127 |                     </div>
 128 |                     <div class="codeblock">
 129 |                         <div class="ex-transition">
 130 |                             <div class="box" style="transition-timing-function: step-start;"></div>
 131 |                         </div>
 132 |                         <code>step-start;</code>
 133 |                     </div>
 134 |                     <div class="codeblock">
 135 |                         <div class="ex-transition">
 136 |                             <div class="box" style="transition-timing-function: step-end;"></div>
 137 |                         </div>
 138 |                         <code>step-end;</code>
 139 |                     </div>
 140 |                 </div>
 141 |             </div>
 142 |             <div class="snippet transition">
 143 |                 <h2 class="code">transition-delay:</h2>
 144 |                 <div class="codeblock">
 145 |                     <div class="ex-transition">
 146 |                         <div class="box" style="transition-delay: 0s;"></div>
 147 |                     </div>
 148 |                     <code>0s;</code>
 149 |                 </div>
 150 |                 <div class="codeblock">
 151 |                     <div class="ex-transition">
 152 |                         <div class="box" style="transition-delay: 0.3s;"></div>
 153 |                     </div>
 154 |                     <code>0.3s;</code>
 155 |                 </div>
 156 |                 <div class="codeblock">
 157 |                     <div class="ex-transition">
 158 |                         <div class="box" style="transition-delay: 0.7s;"></div>
 159 |                     </div>
 160 |                     <code>0.7s;</code>
 161 |                 </div>
 162 |                 <div class="codeblock">
 163 |                     <div class="ex-transition">
 164 |                         <div class="box" style="transition-delay: 1.5s;"></div>
 165 |                     </div>
 166 |                     <code>1.5s;</code>
 167 |                 </div>
 168 |             </div>
 169 |             <div class="snippet">
 170 |                 <h2 class="code">transition-property:</h2>
 171 |                 <h3>Transition a specific property (other properties jump to final state).</h3>
 172 |                 <div class="codeblock">
 173 |                     <div class="ex-transition property all">
 174 |                         <div class="box" style="transition-property: all;">A</div>
 175 |                     </div>
 176 |                     <code>all;</code>
 177 |                 </div>
 178 |                 <div class="codeblock">
 179 |                     <div class="ex-transition property color">
 180 |                         <div class="box" style="transition-property: color;">A</div>
 181 |                     </div>
 182 |                     <code>color;</code>
 183 |                 </div>
 184 |                 <div class="codeblock">
 185 |                     <div class="ex-transition property margin">
 186 |                         <div class="box" style="transition-property: margin;">A</div>
 187 |                     </div>
 188 |                     <code>margin;</code>
 189 |                 </div>
 190 |                 <div class="codeblock">
 191 |                     <div class="ex-transition property background">
 192 |                         <div class="box" style="transition-property: background;">A</div>
 193 |                     </div>
 194 |                     <code>background;</code>
 195 |                 </div>
 196 |             </div>
 197 |         </section>
 198 |         <section id="transition-examples">
 199 |             <h2>Transition examples</h2>
 200 |             <div class="snippet span-5">
 201 |                 <h2>Card</h2>
 202 |                 <div class="codeblock">
 203 |                     <div class="ex-card">
 204 |                         <div class="card">
 205 |                             <div class="card-front">A</div>
 206 |                             <div class="card-back">B</div>
 207 |                         </div>
 208 |                     </div>
 209 |                     <fieldset>
 210 |                         <legend>HTML</legend>
 211 |                         <code>&lt;div class=&quot;ex-card&quot;&gt;</code>
 212 |                         <code>  &lt;div class=&quot;card&quot;&gt;</code>
 213 |                         <code>    &lt;div class=&quot;card-front&quot;&gt;A&lt;/div&gt;</code>
 214 |                         <code>    &lt;div class=&quot;card-back&quot;&gt;B&lt;/div&gt;</code>
 215 |                         <code>  &lt;/div&gt;</code>
 216 |                         <code>&lt;/div&gt;</code>
 217 |                     </fieldset>
 218 |                     <fieldset>
 219 |                         <legend>CSS</legend>
 220 |                         <code>.ex-card:hover .card {</code>
 221 |                         <code>  transform: rotateY(180deg) translateX(100%);</code>
 222 |                         <code>}</code>
 223 |                         <code></code>
 224 |                         <code>.ex-card {</code>
 225 |                         <code>  perspective: 300px;</code>
 226 |                         <code>}</code>
 227 |                         <code></code>
 228 |                         <code>.card {</code>
 229 |                         <code>  transition: 0.7s;</code>
 230 |                         <code>  transform-style: preserve-3d;</code>
 231 |                         <code>  transform-origin: right;</code>
 232 |                         <code>  position: relative;</code>
 233 |                         <code>}</code>
 234 |                         <code></code>
 235 |                         <code>.card-front, .card-back {</code>
 236 |                         <code>  backface-visibility: hidden;</code>
 237 |                         <code>  position: absolute;</code>
 238 |                         <code>}</code>
 239 |                         <code></code>
 240 |                         <code>.card-back {</code>
 241 |                         <code>  transform: rotateY(180deg) translateZ(1px);</code>
 242 |                         <code>}</code>
 243 |                     </fieldset>
 244 |                 </div>
 245 |             </div>
 246 |             <div class="snippet span-5">
 247 |                 <h2>Tooltip</h2>
 248 |                 <div class="codeblock">
 249 |                     <div class="ex-tooltip">
 250 |                         <div class="box biggest"></div>
 251 |                         <p class="tooltip">This is a tooltip message.</p>
 252 |                     </div>
 253 |                     <fieldset>
 254 |                         <legend>HTML</legend>
 255 |                         <code>&lt;div class=&quot;ex-tooltip&quot;&gt;</code>
 256 |                         <code>  &lt;div class=&quot;box biggest&quot;&gt;&lt;/div&gt;</code>
 257 |                         <code>  &lt;p class=&quot;tooltip&quot;&gt;This is a tooltip message.&lt;/p&gt;</code>
 258 |                         <code>&lt;/div&gt;</code>
 259 |                     </fieldset>
 260 |                     <fieldset>
 261 |                         <legend>CSS</legend>
 262 |                         <code>.tooltip {</code>
 263 |                         <code>  background-color: transparent;</code>
 264 |                         <code>  border-radius: 8px;</code>
 265 |                         <code>  color: transparent;</code>
 266 |                         <code>  font-size: 0.7em;</code>
 267 |                         <code>  position: absolute;</code>
 268 |                         <code>  transition: 0.5s;</code>
 269 |                         <code>  padding: 0.5em 1em;</code>
 270 |                         <code>  margin-top: 0;</code>
 271 |                         <code>  z-index: 1000;</code>
 272 |                         <code>}</code>
 273 |                         <code></code>
 274 |                         <code>.ex-tooltip:hover > .tooltip {</code>
 275 |                         <code>  background-color: yellow;</code>
 276 |                         <code>  color: black;</code>
 277 |                         <code>  font-size: 1.2em;</code>
 278 |                         <code>}</code>
 279 |                     </fieldset>
 280 |                 </div>
 281 |             </div>
 282 |             <div class="snippet span-3">
 283 |                 <h2>Translation</h2>
 284 |                 <div class="codeblock">
 285 |                     <div class="ex-transition-translate">
 286 |                         <div class="box biggest"></div>
 287 |                     </div>
 288 |                     <fieldset>
 289 |                         <legend>CSS</legend>
 290 |                         <code>.container .box {</code>
 291 |                         <code>  transition: 1s all;</code>
 292 |                         <code>}</code>
 293 |                         <code></code>
 294 |                         <code>.container:hover .box {</code>
 295 |                         <code>  transform: translateX(200px);</code>
 296 |                         <code>}</code>
 297 |                     </fieldset>
 298 |                 </div>
 299 |             </div>
 300 |             <div class="snippet span-8">
 301 |                 <h2>Translation</h2>
 302 | 
 303 |             </div>
 304 |         </section>
 305 |         <section id="animation-css">
 306 |             <h2>CSS animation</h2>
 307 |             <h3>See
 308 |                 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">MDN on CSS animations</a>. Also check out
 309 |                 <a href="https://greensock.com/">GreenSock</a>.</h3>
 310 |             <div class="snippet animation">
 311 |                 <h2 class="code">animation-duration:</h2>
 312 |                 <div class="codeblock">
 313 |                     <div class="ex-animation">
 314 |                         <div class="box" style="animation-duration: 0.7s;"></div>
 315 |                     </div>
 316 |                     <code>0.7s;</code>
 317 |                 </div>
 318 |                 <div class="codeblock">
 319 |                     <div class="ex-animation">
 320 |                         <div class="box" style="animation-duration: 1s;"></div>
 321 |                     </div>
 322 |                     <code>1s;</code>
 323 |                 </div>
 324 |                 <div class="codeblock">
 325 |                     <div class="ex-animation">
 326 |                         <div class="box" style="animation-duration: 2s;"></div>
 327 |                     </div>
 328 |                     <code>2s;</code>
 329 |                 </div>
 330 |                 <div class="codeblock">
 331 |                     <div class="ex-animation">
 332 |                         <div class="box" style="animation-duration: 3s;"></div>
 333 |                     </div>
 334 |                     <code>3s;</code>
 335 |                 </div>
 336 |             </div>
 337 |             <div class="snippet animation">
 338 |                 <h2 class="code">animation-direction:</h2>
 339 |                 <div class="codeblock">
 340 |                     <div class="ex-animation">
 341 |                         <div class="box" style="animation-direction: normal;"></div>
 342 |                     </div>
 343 |                     <code>normal;</code>
 344 |                 </div>
 345 |                 <div class="codeblock">
 346 |                     <div class="ex-animation">
 347 |                         <div class="box" style="animation-direction: alternate;"></div>
 348 |                     </div>
 349 |                     <code>alternate;</code>
 350 |                 </div>
 351 |                 <div class="codeblock">
 352 |                     <div class="ex-animation">
 353 |                         <div class="box" style="animation-direction: reverse;"></div>
 354 |                     </div>
 355 |                     <code>reverse;</code>
 356 |                 </div>
 357 |                 <div class="codeblock">
 358 |                     <div class="ex-animation">
 359 |                         <div class="box" style="animation-direction: alternate-reverse;"></div>
 360 |                     </div>
 361 |                     <code>alternate-reverse;</code>
 362 |                 </div>
 363 |             </div>
 364 |             <div class="snippet animation">
 365 |                 <h2 class="code">animation-iteration-count:</h2>
 366 |                 <div class="codeblock">
 367 |                     <div class="ex-animation">
 368 |                         <div class="box" style="animation-iteration-count: 1;"></div>
 369 |                     </div>
 370 |                     <code>1;</code>
 371 |                 </div>
 372 |                 <div class="codeblock">
 373 |                     <div class="ex-animation">
 374 |                         <div class="box" style="animation-iteration-count: 2;"></div>
 375 |                     </div>
 376 |                     <code>2;</code>
 377 |                 </div>
 378 |                 <div class="codeblock">
 379 |                     <div class="ex-animation">
 380 |                         <div class="box" style="animation-iteration-count: infinite;"></div>
 381 |                     </div>
 382 |                     <code>infinite;</code>
 383 |                 </div>
 384 |             </div>
 385 |             <div class="snippet span-5 animation alternate">
 386 |                 <h2 class="code">animation-timing-function:</h2>
 387 |                 <div class="ex-animation-timing-function">
 388 |                     <div class="codeblock">
 389 |                         <div class="ex-animation">
 390 |                             <div class="box" style="animation-timing-function: linear;"></div>
 391 |                         </div>
 392 |                         <code>linear;</code>
 393 |                     </div>
 394 |                     <div class="codeblock">
 395 |                         <div class="ex-animation">
 396 |                             <div class="box" style="animation-timing-function: ease;"></div>
 397 |                         </div>
 398 |                         <code>ease;</code>
 399 |                     </div>
 400 |                     <div class="codeblock">
 401 |                         <div class="ex-animation">
 402 |                             <div class="box" style="animation-timing-function: ease-in;"></div>
 403 |                         </div>
 404 |                         <code>ease-in;</code>
 405 |                     </div>
 406 |                     <div class="codeblock">
 407 |                         <div class="ex-animation">
 408 |                             <div class="box" style="animation-timing-function: ease-out;"></div>
 409 |                         </div>
 410 |                         <code>ease-out;</code>
 411 |                     </div>
 412 |                     <div class="codeblock">
 413 |                         <div class="ex-animation">
 414 |                             <div class="box" style="animation-timing-function: ease-in-out;"></div>
 415 |                         </div>
 416 |                         <code>ease-in-out;</code>
 417 |                     </div>
 418 |                     <div class="codeblock">
 419 |                         <div class="ex-animation">
 420 |                             <div class="box" style="animation-timing-function: steps(4);"></div>
 421 |                         </div>
 422 |                         <code>steps(4);</code>
 423 |                     </div>
 424 |                     <div class="codeblock">
 425 |                         <div class="ex-animation">
 426 |                             <div class="box" style="animation-timing-function: steps(10);"></div>
 427 |                         </div>
 428 |                         <code>steps(10);</code>
 429 |                     </div>
 430 |                     <div class="codeblock">
 431 |                         <div class="ex-animation">
 432 |                             <div class="box" style="animation-timing-function: step-start;"></div>
 433 |                         </div>
 434 |                         <code>step-start;</code>
 435 |                     </div>
 436 |                     <div class="codeblock">
 437 |                         <div class="ex-animation">
 438 |                             <div class="box" style="animation-timing-function: step-end;"></div>
 439 |                         </div>
 440 |                         <code>step-end;</code>
 441 |                     </div>
 442 |                 </div>
 443 |             </div>
 444 |             <div class="snippet animation ex-animation-fill-mode">
 445 |                 <h2 class="code">animation-fill-mode:</h2>
 446 |                 <h3>
 447 |                     <span class="fillmode-initial">Initial state</span>
 448 |                     <span class="fillmode-delay">Delay state 1s</span>
 449 |                     <span class="fillmode-animate">Animate 1s</span>
 450 |                     <span class="fillmode-end">End state</span>
 451 |                 </h3>
 452 |                 <div class="codeblock">
 453 |                     <div class="ex-animation">
 454 |                         <div class="box" style="animation-fill-mode: none;">A</div>
 455 |                     </div>
 456 |                     <code>none;</code>
 457 |                 </div>
 458 |                 <div class="codeblock">
 459 |                     <div class="ex-animation">
 460 |                         <div class="box" style="animation-fill-mode: forwards;">A</div>
 461 |                     </div>
 462 |                     <code>forwards;</code>
 463 |                 </div>
 464 |                 <div class="codeblock">
 465 |                     <div class="ex-animation">
 466 |                         <div class="box" style="animation-fill-mode: backwards;">A</div>
 467 |                     </div>
 468 |                     <code>backwards;</code>
 469 |                 </div>
 470 |                 <div class="codeblock">
 471 |                     <div class="ex-animation">
 472 |                         <div class="box" style="animation-fill-mode: both;">A</div>
 473 |                     </div>
 474 |                     <code>both;</code>
 475 |                 </div>
 476 |             </div>
 477 |         </section>
 478 |         <!-- End section animation-css -->
 479 | 
 480 |         <section id="animation-keyframes">
 481 |             <h2>Animation Keyframes</h2>
 482 |             <div class="snippet animation">
 483 |                 <h2>Slide right</h2>
 484 |                 <div class="codeblock">
 485 |                     <div class="ex-keyframe">
 486 |                         <div class="box"></div>
 487 |                     </div>
 488 |                     <code>@keyframes slideright {</code>
 489 |                     <code>    from {</code>
 490 |                     <code>        margin-left: 0%;</code>
 491 |                     <code>    }</code>
 492 |                     <code>    to {</code>
 493 |                     <code>        margin-left: 80%;</code>
 494 |                     <code>    }</code>
 495 |                     <code>}</code>
 496 |                 </div>
 497 |             </div>
 498 |             <div class="snippet span-4 animation">
 499 |                 <h2>Set background color</h2>
 500 |                 <div class="codeblock">
 501 |                     <div class="ex-keyframe">
 502 |                         <div class="box backgroundcolor"></div>
 503 |                     </div>
 504 |                     <code>@keyframes showbackground {</code>
 505 |                     <code>    from {</code>
 506 |                     <code>        background-color: blue;</code>
 507 |                     <code>    }</code>
 508 |                     <code>    to {</code>
 509 |                     <code>        background-color: red;</code>
 510 |                     <code>    }</code>
 511 |                     <code>}</code>
 512 |                 </div>
 513 |             </div>
 514 |             <div class="snippet animation">
 515 |                 <h2>Grow size</h2>
 516 |                 <div class="codeblock">
 517 |                     <div class="ex-keyframe">
 518 |                         <div class="box size"></div>
 519 |                     </div>
 520 |                     <code>@keyframes growsize {</code>
 521 |                     <code>    from {</code>
 522 |                     <code>        height: 1em;</code>
 523 |                     <code>        width: 1em;</code>
 524 |                     <code>    }</code>
 525 |                     <code>    to {</code>
 526 |                     <code>        height: 4em;</code>
 527 |                     <code>        width: 4em;</code>
 528 |                     <code>    }</code>
 529 |                     <code>}</code>
 530 |                 </div>
 531 |             </div>
 532 |             <div class="snippet span-4 animation">
 533 |                 <h2>Cursor</h2>
 534 |                 <div class="codeblock">
 535 |                     <div class="ex-keyframe">
 536 |                         <div class="cursor"></div>
 537 |                     </div>
 538 |                     <code>@keyframes cursor {</code>
 539 |                     <code>    50% {</code>
 540 |                     <code>        border-color: transparent;</code>
 541 |                     <code>    }</code>
 542 |                     <code>}</code>
 543 |                 </div>
 544 |             </div>
 545 |         </section>
 546 | 
 547 |         <section id="animation-animate-css">
 548 |             <h2>Using animate.css</h2>
 549 |             <div class="snippet animation span-6">
 550 |                 <h2>Attention</h2>
 551 |                 <div class="grid col-2">
 552 |                     <div class="codeblock">
 553 |                         <div class="ex-animation">
 554 |                             <h2 class="animated bounce">bounce</h2>
 555 |                         </div>
 556 |                         <code>class=&quot;animated bounce&quot;</code>
 557 |                     </div>
 558 |                     <div class="codeblock">
 559 |                         <div class="ex-animation">
 560 |                             <h2 class="animated flash">flash</h2>
 561 |                         </div>
 562 |                         <code>class=&quot;animated flash&quot;</code>
 563 |                     </div>
 564 |                     <div class="codeblock">
 565 |                         <div class="ex-animation">
 566 |                             <h2 class="animated pulse">pulse</h2>
 567 |                         </div>
 568 |                         <code>class=&quot;animated pulse&quot;</code>
 569 |                     </div>
 570 |                     <div class="codeblock">
 571 |                         <div class="ex-animation">
 572 |                             <h2 class="animated rubberBand">rubberBand</h2>
 573 |                         </div>
 574 |                         <code>class=&quot;animated rubberBand&quot;</code>
 575 |                     </div>
 576 |                     <div class="codeblock">
 577 |                         <div class="ex-animation">
 578 |                             <h2 class="animated shake">shake</h2>
 579 |                         </div>
 580 |                         <code>class=&quot;animated shake&quot;</code>
 581 |                     </div>
 582 |                     <div class="codeblock">
 583 |                         <div class="ex-animation">
 584 |                             <h2 class="animated headShake">headShake</h2>
 585 |                         </div>
 586 |                         <code>class=&quot;animated headShake&quot;</code>
 587 |                     </div>
 588 |                     <div class="codeblock">
 589 |                         <div class="ex-animation">
 590 |                             <h2 class="animated swing">swing</h2>
 591 |                         </div>
 592 |                         <code>class=&quot;animated swing&quot;</code>
 593 |                     </div>
 594 |                     <div class="codeblock">
 595 |                         <div class="ex-animation">
 596 |                             <h2 class="animated tada">tada</h2>
 597 |                         </div>
 598 |                         <code>class=&quot;animated tada&quot;</code>
 599 |                     </div>
 600 |                     <div class="codeblock">
 601 |                         <div class="ex-animation">
 602 |                             <h2 class="animated wobble">wobble</h2>
 603 |                         </div>
 604 |                         <code>class=&quot;animated wobble&quot;</code>
 605 |                     </div>
 606 |                     <div class="codeblock">
 607 |                         <div class="ex-animation">
 608 |                             <h2 class="animated jello">jello</h2>
 609 |                         </div>
 610 |                         <code>class=&quot;animated jello&quot;</code>
 611 |                     </div>
 612 |                 </div>
 613 |             </div>
 614 |             <div class="snippet animation">
 615 |                 <h2>Bouncing entrances</h2>
 616 |                 <div class="codeblock">
 617 |                     <div class="ex-animation">
 618 |                         <h2 class="animated bounceIn">bounceIn</h2>
 619 |                     </div>
 620 |                     <code>class=&quot;animated bounceIn&quot;</code>
 621 |                 </div>
 622 |                 <div class="codeblock">
 623 |                     <div class="ex-animation">
 624 |                         <h2 class="animated bounceInDown">bounceInDown</h2>
 625 |                     </div>
 626 |                     <code>class=&quot;animated bounceInDown&quot;</code>
 627 |                 </div>
 628 |                 <div class="codeblock">
 629 |                     <div class="ex-animation">
 630 |                         <h2 class="animated bounceInLeft">bounceInLeft</h2>
 631 |                     </div>
 632 |                     <code>class=&quot;animated bounceInLeft&quot;</code>
 633 |                 </div>
 634 |                 <div class="codeblock">
 635 |                     <div class="ex-animation">
 636 |                         <h2 class="animated bounceInRight">bounceInRight</h2>
 637 |                     </div>
 638 |                     <code>class=&quot;animated bounceInRight&quot;</code>
 639 |                 </div>
 640 |                 <div class="codeblock">
 641 |                     <div class="ex-animation">
 642 |                         <h2 class="animated bounceInUp">bounceInUp</h2>
 643 |                     </div>
 644 |                     <code>class=&quot;animated bounceInUp&quot;</code>
 645 |                 </div>
 646 |             </div>
 647 |             <div class="snippet animation">
 648 |                 <h2>Bouncing exits</h2>
 649 |                 <div class="codeblock">
 650 |                     <div class="ex-animation">
 651 |                         <h2 class="animated bounceOut">bounceOut</h2>
 652 |                     </div>
 653 |                     <code>class=&quot;animated bounceOut&quot;</code>
 654 |                 </div>
 655 |                 <div class="codeblock">
 656 |                     <div class="ex-animation">
 657 |                         <h2 class="animated bounceOutDown">bounceOutDown</h2>
 658 |                     </div>
 659 |                     <code>class=&quot;animated bounceOutDown&quot;</code>
 660 |                 </div>
 661 |                 <div class="codeblock">
 662 |                     <div class="ex-animation">
 663 |                         <h2 class="animated bounceOutLeft">bounceOutLeft</h2>
 664 |                     </div>
 665 |                     <code>class=&quot;animated bounceOutLeft&quot;</code>
 666 |                 </div>
 667 |                 <div class="codeblock">
 668 |                     <div class="ex-animation">
 669 |                         <h2 class="animated bounceOutRight">bounceOutRight</h2>
 670 |                     </div>
 671 |                     <code>class=&quot;animated bounceOutRight&quot;</code>
 672 |                 </div>
 673 |                 <div class="codeblock">
 674 |                     <div class="ex-animation">
 675 |                         <h2 class="animated bounceOutUp">bounceOutUp</h2>
 676 |                     </div>
 677 |                     <code>class=&quot;animated bounceOutUp&quot;</code>
 678 |                 </div>
 679 |             </div>
 680 |             <div class="snippet animation span-6">
 681 |                 <h2>Fading entrances</h2>
 682 |                 <div class="grid col-2">
 683 |                     <div class="codeblock">
 684 |                         <div class="ex-animation">
 685 |                             <h2 class="animated fadeIn">fadeIn</h2>
 686 |                         </div>
 687 |                         <code>class=&quot;animated fadeIn&quot;</code>
 688 |                     </div>
 689 |                     <div class="codeblock">
 690 |                         <div class="ex-animation">
 691 |                             <h2 class="animated fadeInDown">fadeInDown</h2>
 692 |                         </div>
 693 |                         <code>class=&quot;animated fadeInDown&quot;</code>
 694 |                     </div>
 695 |                     <div class="codeblock">
 696 |                         <div class="ex-animation">
 697 |                             <h2 class="animated fadeInDownBig">fadeInDownBig</h2>
 698 |                         </div>
 699 |                         <code>class=&quot;animated fadeInDownBig&quot;</code>
 700 |                     </div>
 701 |                     <div class="codeblock">
 702 |                         <div class="ex-animation">
 703 |                             <h2 class="animated fadeInLeft">fadeInLeft</h2>
 704 |                         </div>
 705 |                         <code>class=&quot;animated fadeInLeft&quot;</code>
 706 |                     </div>
 707 |                     <div class="codeblock">
 708 |                         <div class="ex-animation">
 709 |                             <h2 class="animated fadeInLeftBig">fadeInLeftBig</h2>
 710 |                         </div>
 711 |                         <code>class=&quot;animated fadeInLeftBig&quot;</code>
 712 |                     </div>
 713 |                     <div class="codeblock">
 714 |                         <div class="ex-animation">
 715 |                             <h2 class="animated fadeInRight">fadeInRight</h2>
 716 |                         </div>
 717 |                         <code>class=&quot;animated fadeInRight&quot;</code>
 718 |                     </div>
 719 |                     <div class="codeblock">
 720 |                         <div class="ex-animation">
 721 |                             <h2 class="animated fadeInRightBig">fadeInRightBig</h2>
 722 |                         </div>
 723 |                         <code>class=&quot;animated fadeInRightBig&quot;</code>
 724 |                     </div>
 725 |                     <div class="codeblock">
 726 |                         <div class="ex-animation">
 727 |                             <h2 class="animated fadeInUp">fadeInUp</h2>
 728 |                         </div>
 729 |                         <code>class=&quot;animated fadeInUp&quot;</code>
 730 |                     </div>
 731 |                     <div class="codeblock">
 732 |                         <div class="ex-animation">
 733 |                             <h2 class="animated fadeInUpBig">fadeInUpBig</h2>
 734 |                         </div>
 735 |                         <code>class=&quot;animated fadeInUpBig&quot;</code>
 736 |                     </div>
 737 |                 </div>
 738 |             </div>
 739 |             <div class="snippet animation span-6">
 740 |                 <h2>Fading exits</h2>
 741 |                 <div class="grid col-2">
 742 |                     <div class="codeblock">
 743 |                         <div class="ex-animation">
 744 |                             <h2 class="animated fadeOut">fadeOut</h2>
 745 |                         </div>
 746 |                         <code>class=&quot;animated fadeOut&quot;</code>
 747 |                     </div>
 748 |                     <div class="codeblock">
 749 |                         <div class="ex-animation">
 750 |                             <h2 class="animated fadeOutDown">fadeOutDown</h2>
 751 |                         </div>
 752 |                         <code>class=&quot;animated fadeOutDown&quot;</code>
 753 |                     </div>
 754 |                     <div class="codeblock">
 755 |                         <div class="ex-animation">
 756 |                             <h2 class="animated fadeOutDownBig">fadeOutDownBig</h2>
 757 |                         </div>
 758 |                         <code>class=&quot;animated fadeOutDownBig&quot;</code>
 759 |                     </div>
 760 |                     <div class="codeblock">
 761 |                         <div class="ex-animation">
 762 |                             <h2 class="animated fadeOutLeft">fadeOutLeft</h2>
 763 |                         </div>
 764 |                         <code>class=&quot;animated fadeOutLeft&quot;</code>
 765 |                     </div>
 766 |                     <div class="codeblock">
 767 |                         <div class="ex-animation">
 768 |                             <h2 class="animated fadeOutLeftBig">fadeOutLeftBig</h2>
 769 |                         </div>
 770 |                         <code>class=&quot;animated fadeOutLeftBig&quot;</code>
 771 |                     </div>
 772 |                     <div class="codeblock">
 773 |                         <div class="ex-animation">
 774 |                             <h2 class="animated fadeOutRight">fadeOutRight</h2>
 775 |                         </div>
 776 |                         <code>class=&quot;animated fadeOutRight&quot;</code>
 777 |                     </div>
 778 |                     <div class="codeblock">
 779 |                         <div class="ex-animation">
 780 |                             <h2 class="animated fadeOutRightBig">fadeOutRightBig</h2>
 781 |                         </div>
 782 |                         <code>class=&quot;animated fadeOutRightBig&quot;</code>
 783 |                     </div>
 784 |                     <div class="codeblock">
 785 |                         <div class="ex-animation">
 786 |                             <h2 class="animated fadeOutUp">fadeOutUp</h2>
 787 |                         </div>
 788 |                         <code>class=&quot;animated fadeOutUp&quot;</code>
 789 |                     </div>
 790 |                     <div class="codeblock">
 791 |                         <div class="ex-animation">
 792 |                             <h2 class="animated fadeOutUpBig">fadeOutUpBig</h2>
 793 |                         </div>
 794 |                         <code>class=&quot;animated fadeOutUpBig&quot;</code>
 795 |                     </div>
 796 |                 </div>
 797 |             </div>
 798 |             <div class="snippet animation">
 799 |                 <h2>Flips</h2>
 800 |                 <div class="codeblock">
 801 |                     <div class="ex-animation">
 802 |                         <h2 class="animated flipInX">flipInX</h2>
 803 |                     </div>
 804 |                     <code>class=&quot;animated flipInX&quot;</code>
 805 |                 </div>
 806 |                 <div class="codeblock">
 807 |                     <div class="ex-animation">
 808 |                         <h2 class="animated flipInY">flipInY</h2>
 809 |                     </div>
 810 |                     <code>class=&quot;animated flipInY&quot;</code>
 811 |                 </div>
 812 |                 <div class="codeblock">
 813 |                     <div class="ex-animation">
 814 |                         <h2 class="animated flipOutX">flipOutX</h2>
 815 |                     </div>
 816 |                     <code>class=&quot;animated flipOutX&quot;</code>
 817 |                 </div>
 818 |                 <div class="codeblock">
 819 |                     <div class="ex-animation">
 820 |                         <h2 class="animated flipOutY">flipOutY</h2>
 821 |                     </div>
 822 |                     <code>class=&quot;animated flipOutY&quot;</code>
 823 |                 </div>
 824 |             </div>
 825 |             <div class="snippet animation">
 826 |                 <h2>Lightspeed</h2>
 827 |                 <div class="codeblock">
 828 |                     <div class="ex-animation">
 829 |                         <h2 class="animated lightSpeedIn">lightSpeedIn</h2>
 830 |                     </div>
 831 |                     <code>class=&quot;animated lightSpeedIn&quot;</code>
 832 |                 </div>
 833 |                 <div class="codeblock">
 834 |                     <div class="ex-animation">
 835 |                         <h2 class="animated lightSpeedOut">lightSpeedOut</h2>
 836 |                     </div>
 837 |                     <code>class=&quot;animated lightSpeedOut&quot;</code>
 838 |                 </div>
 839 |             </div>
 840 |             <div class="snippet animation span-4">
 841 |                 <h2>Rotating entrances</h2>
 842 |                 <div class="codeblock">
 843 |                     <div class="ex-animation">
 844 |                         <h2 class="animated rotateIn">rotateIn</h2>
 845 |                     </div>
 846 |                     <code>class=&quot;animated rotateIn&quot;</code>
 847 |                 </div>
 848 |                 <div class="codeblock">
 849 |                     <div class="ex-animation">
 850 |                         <h2 class="animated rotateInDownLeft">rotateInDownLeft</h2>
 851 |                     </div>
 852 |                     <code>class=&quot;animated rotateInDownLeft&quot;</code>
 853 |                 </div>
 854 |                 <div class="codeblock">
 855 |                     <div class="ex-animation">
 856 |                         <h2 class="animated rotateInDownRight">rotateInDownRight</h2>
 857 |                     </div>
 858 |                     <code>class=&quot;animated rotateInDownRight&quot;</code>
 859 |                 </div>
 860 |                 <div class="codeblock">
 861 |                     <div class="ex-animation">
 862 |                         <h2 class="animated rotateInUpLeft">rotateInUpLeft</h2>
 863 |                     </div>
 864 |                     <code>class=&quot;animated rotateInUpLeft&quot;</code>
 865 |                 </div>
 866 |                 <div class="codeblock">
 867 |                     <div class="ex-animation">
 868 |                         <h2 class="animated rotateInUpRight">rotateInUpRight</h2>
 869 |                     </div>
 870 |                     <code>class=&quot;animated rotateInUpRight&quot;</code>
 871 |                 </div>
 872 |             </div>
 873 |             <div class="snippet animation span-4">
 874 |                 <h2>Rotating exits</h2>
 875 |                 <div class="codeblock">
 876 |                     <div class="ex-animation">
 877 |                         <h2 class="animated rotateOut">rotateOut</h2>
 878 |                     </div>
 879 |                     <code>class=&quot;animated rotateOut&quot;</code>
 880 |                 </div>
 881 |                 <div class="codeblock">
 882 |                     <div class="ex-animation">
 883 |                         <h2 class="animated rotateOutDownLeft">rotateOutDownLeft</h2>
 884 |                     </div>
 885 |                     <code>class=&quot;animated rotateOutDownLeft&quot;</code>
 886 |                 </div>
 887 |                 <div class="codeblock">
 888 |                     <div class="ex-animation">
 889 |                         <h2 class="animated rotateOutDownRight">rotateOutDownRight</h2>
 890 |                     </div>
 891 |                     <code>class=&quot;animated rotateOutDownRight&quot;</code>
 892 |                 </div>
 893 |                 <div class="codeblock">
 894 |                     <div class="ex-animation">
 895 |                         <h2 class="animated rotateOutUpLeft">rotateOutUpLeft</h2>
 896 |                     </div>
 897 |                     <code>class=&quot;animated rotateOutUpLeft&quot;</code>
 898 |                 </div>
 899 |                 <div class="codeblock">
 900 |                     <div class="ex-animation">
 901 |                         <h2 class="animated rotateOutUpRight">rotateOutUpRight</h2>
 902 |                     </div>
 903 |                     <code>class=&quot;animated rotateOutUpRight&quot;</code>
 904 |                 </div>
 905 |             </div>
 906 |             <div class="snippet animation">
 907 |                 <h2>Zoom entrances</h2>
 908 |                 <div class="codeblock">
 909 |                     <div class="ex-animation">
 910 |                         <h2 class="animated zoomIn">zoomIn</h2>
 911 |                     </div>
 912 |                     <code>class=&quot;animated zoomIn&quot;</code>
 913 |                 </div>
 914 |                 <div class="codeblock">
 915 |                     <div class="ex-animation">
 916 |                         <h2 class="animated zoomInDown">zoomInDown</h2>
 917 |                     </div>
 918 |                     <code>class=&quot;animated zoomInDown&quot;</code>
 919 |                 </div>
 920 |                 <div class="codeblock">
 921 |                     <div class="ex-animation">
 922 |                         <h2 class="animated zoomInLeft">zoomInLeft</h2>
 923 |                     </div>
 924 |                     <code>class=&quot;animated zoomInLeft&quot;</code>
 925 |                 </div>
 926 |                 <div class="codeblock">
 927 |                     <div class="ex-animation">
 928 |                         <h2 class="animated zoomInRight">zoomInRight</h2>
 929 |                     </div>
 930 |                     <code>class=&quot;animated zoomInRight&quot;</code>
 931 |                 </div>
 932 |                 <div class="codeblock">
 933 |                     <div class="ex-animation">
 934 |                         <h2 class="animated zoomInUp">zoomInUp</h2>
 935 |                     </div>
 936 |                     <code>class=&quot;animated zoomInUp&quot;</code>
 937 |                 </div>
 938 |             </div>
 939 |             <div class="snippet animation">
 940 |                 <h2>Zoom exits</h2>
 941 |                 <div class="codeblock">
 942 |                     <div class="ex-animation">
 943 |                         <h2 class="animated zoomOut">zoomOut</h2>
 944 |                     </div>
 945 |                     <code>class=&quot;animated zoomOut&quot;</code>
 946 |                 </div>
 947 |                 <div class="codeblock">
 948 |                     <div class="ex-animation">
 949 |                         <h2 class="animated zoomOutDown">zoomOutDown</h2>
 950 |                     </div>
 951 |                     <code>class=&quot;animated zoomOutDown&quot;</code>
 952 |                 </div>
 953 |                 <div class="codeblock">
 954 |                     <div class="ex-animation">
 955 |                         <h2 class="animated zoomOutLeft">zoomOutLeft</h2>
 956 |                     </div>
 957 |                     <code>class=&quot;animated zoomOutLeft&quot;</code>
 958 |                 </div>
 959 |                 <div class="codeblock">
 960 |                     <div class="ex-animation">
 961 |                         <h2 class="animated zoomOutRight">zoomOutRight</h2>
 962 |                     </div>
 963 |                     <code>class=&quot;animated zoomOutRight&quot;</code>
 964 |                 </div>
 965 |                 <div class="codeblock">
 966 |                     <div class="ex-animation">
 967 |                         <h2 class="animated zoomOutUp">zoomOutUp</h2>
 968 |                     </div>
 969 |                     <code>class=&quot;animated zoomOutUp&quot;</code>
 970 |                 </div>
 971 |             </div>
 972 |             <div class="snippet animation">
 973 |                 <h2>Slide entrances</h2>
 974 |                 <div class="codeblock">
 975 |                     <div class="ex-animation">
 976 |                         <h2 class="animated slideInDown">slideInDown</h2>
 977 |                     </div>
 978 |                     <code>class=&quot;animated slideInDown&quot;</code>
 979 |                 </div>
 980 |                 <div class="codeblock">
 981 |                     <div class="ex-animation">
 982 |                         <h2 class="animated slideInLeft">slideInLeft</h2>
 983 |                     </div>
 984 |                     <code>class=&quot;animated slideInLeft&quot;</code>
 985 |                 </div>
 986 |                 <div class="codeblock">
 987 |                     <div class="ex-animation">
 988 |                         <h2 class="animated slideInRight">slideInRight</h2>
 989 |                     </div>
 990 |                     <code>class=&quot;animated slideInRight&quot;</code>
 991 |                 </div>
 992 |                 <div class="codeblock">
 993 |                     <div class="ex-animation">
 994 |                         <h2 class="animated slideInUp">slideInUp</h2>
 995 |                     </div>
 996 |                     <code>class=&quot;animated slideInUp&quot;</code>
 997 |                 </div>
 998 |             </div>
 999 |             <div class="snippet animation">
1000 |                 <h2>Slide exits</h2>
1001 |                 <div class="codeblock">
1002 |                     <div class="ex-animation">
1003 |                         <h2 class="animated slideOutDown">slideOutDown</h2>
1004 |                     </div>
1005 |                     <code>class=&quot;animated slideOutDown&quot;</code>
1006 |                 </div>
1007 |                 <div class="codeblock">
1008 |                     <div class="ex-animation">
1009 |                         <h2 class="animated slideOutLeft">slideOutLeft</h2>
1010 |                     </div>
1011 |                     <code>class=&quot;animated slideOutLeft&quot;</code>
1012 |                 </div>
1013 |                 <div class="codeblock">
1014 |                     <div class="ex-animation">
1015 |                         <h2 class="animated slideOutRight">slideOutRight</h2>
1016 |                     </div>
1017 |                     <code>class=&quot;animated slideOutRight&quot;</code>
1018 |                 </div>
1019 |                 <div class="codeblock">
1020 |                     <div class="ex-animation">
1021 |                         <h2 class="animated slideOutUp">slideOutUp</h2>
1022 |                     </div>
1023 |                     <code>class=&quot;animated slideOutUp&quot;</code>
1024 |                 </div>
1025 |             </div>
1026 |             <div class="snippet animation">
1027 |                 <h2>Specials</h2>
1028 |                 <div class="codeblock">
1029 |                     <div class="ex-animation">
1030 |                         <h2 class="animated hinge">hinge</h2>
1031 |                     </div>
1032 |                     <code>class=&quot;animated hinge&quot;</code>
1033 |                 </div>
1034 |                 <div class="codeblock">
1035 |                     <div class="ex-animation">
1036 |                         <h2 class="animated jackInTheBox">jackInTheBox</h2>
1037 |                     </div>
1038 |                     <code>class=&quot;animated jackInTheBox&quot;</code>
1039 |                 </div>
1040 |                 <div class="codeblock">
1041 |                     <div class="ex-animation">
1042 |                         <h2 class="animated rollIn">rollIn</h2>
1043 |                     </div>
1044 |                     <code>class=&quot;animated rollIn&quot;</code>
1045 |                 </div>
1046 |                 <div class="codeblock">
1047 |                     <div class="ex-animation">
1048 |                         <h2 class="animated rollOut">rollOut</h2>
1049 |                     </div>
1050 |                     <code>class=&quot;animated rollOut&quot;</code>
1051 |                 </div>
1052 |             </div>
1053 |         </section>
1054 |     </section>
1055 | </body>
1056 | 
1057 | </html>
1058 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rustem-garr/html-css-sapaklar/8e092bac6fe8ed5e98e47fe560abbb61084b8ebe/favicon.ico


--------------------------------------------------------------------------------
/fixed-position-mysaly.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <title>Title</title>
 6 |     <link href="style.css" type="text/css" rel="stylesheet">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <meta charset="utf-8">
 9 | </head>
10 | 
11 | <body>
12 |     <div class="codeblock">
13 |         <div style="right:0; overflow:scroll;">
14 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam leo fringilla hendrerit efficitur. Maecenas bibendum
15 |             iaculis purus eget placerat. Nunc aliquet tristique mauris, elementum suscipit ante congue sit amet. Mauris tempus
16 |             tellus vitae felis volutpat sodales. Vestibulum a luctus neque. Ut malesuada lectus accumsan nibh laoreet, sit
17 |             amet hendrerit nisl commodo. Nullam vel ultrices mauris. Vivamus malesuada auctor mollis. Nulla ultricies nisl
18 |             rutrum sagittis condimentum. Aliquam sit amet tempus libero. Aenean iaculis arcu vel sapien pulvinar rhoncus.
19 |             Etiam pellentesque eu risus vel euismod. Nullam efficitur euismod arcu, varius rhoncus sem elementum quis. Nunc
20 |             in placerat orci, sit amet porttitor ex. Nunc varius tempor mattis. Aenean nunc nibh, bibendum vel facilisis
21 |             vel, pellentesque sit amet mi. Phasellus venenatis venenatis turpis non pretium. Nulla malesuada justo eu elit
22 |             sagittis, egestas aliquam nibh consequat. Vestibulum volutpat magna enim, ut eleifend eros vehicula vitae. Integer
23 |             accumsan dui ex, at accumsan nulla faucibus sed. Donec feugiat scelerisque imperdiet. Nunc vitae tempor turpis,
24 |             vel faucibus felis. Nam dignissim interdum turpis, vel pretium ipsum iaculis non. Duis laoreet dictum massa,
25 |             in finibus sem malesuada vitae.
26 |         </div>
27 |         <div class="ex-fixed" style="left: 0; top: 0;">
28 |             <code>left:0;<br>top:0;</code>
29 |         </div>
30 |         <div class="ex-fixed" style="left: 0; bottom: 0;">
31 |             <code>left:0;<br>bottom:0;</code>
32 |         </div>
33 |         <div class="ex-fixed" style="right: 0; top: 0;">
34 |             <code>right:0;<br>top:0;</code>
35 |         </div>
36 |         <div class="ex-fixed" style="right: 0; bottom: 0;">
37 |             <code>right:0;<br>bottom:0;</code>
38 |         </div>
39 |     </div>
40 | </body>
41 | 
42 | </html>


--------------------------------------------------------------------------------
/sahypa-qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rustem-garr/html-css-sapaklar/8e092bac6fe8ed5e98e47fe560abbb61084b8ebe/sahypa-qrcode.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |     --bg-color-active: red;
   3 |     --bg-color-box: #aaa;
   4 |     --bg-color-header: rgb(5, 187, 5);
   5 |     --bg-color-highlight: #bbb;
   6 |     --bg-color-hover: green;
   7 |     --bg-color-light: white;
   8 |     --bg-color-link: yellow;
   9 |     --bg-color-nav: #1464c1;
  10 |     --bg-color-semitransparent: hsla(0, 0%, 40%, 0.8);
  11 |     --bg-color-visited: #ccc;
  12 |     --bg-color: #eee;
  13 |     --border-baseline: 2px solid gray;
  14 |     --border-bounds: 1px solid gray;
  15 |     --border-container: 2px solid #ccc;
  16 |     --border-flex: 1px dashed #777;
  17 |     --border-guides: 1px dashed black;
  18 |     --border-header: 2px solid rgb(15, 213, 15);
  19 |     --border-separator: 1px dashed #aaa;
  20 |     --border-subtle: 1px solid #999;
  21 |     --border-table: 2px solid black;
  22 |     --font-color-added: green;
  23 |     --font-color-dark: black;
  24 |     --font-color-light: white;
  25 |     --font-color-medium: #777;
  26 |     --font-family-code: "Source Code Pro", monospace;
  27 |     --font-family-main: "Source Sans Pro", sans-serif;
  28 |     --height-size-box: 100px;
  29 | }
  30 | 
  31 | nav {
  32 |     position: fixed;
  33 |     display: flex;
  34 |     justify-content: space-between;
  35 |     z-index: 1000;
  36 |     background-color: var(--bg-color-nav);
  37 |     min-width: 100px;
  38 |     min-height: 40px;
  39 |     width: 100%;
  40 | }
  41 | 
  42 | nav > ul {
  43 |     list-style: none;
  44 |     display: flex;
  45 | }
  46 | 
  47 | nav > ul.left {
  48 |     padding-left: 10px;
  49 | }
  50 | 
  51 | nav > ul > li {
  52 |     margin: 0px 20px;
  53 |     color: var(--font-color-light);
  54 |     display: flex;
  55 |     flex-direction: column;
  56 |     justify-content: center;
  57 | }
  58 | 
  59 | nav a:link,
  60 | nav a:visited {
  61 |     color: var(--font-color-light);
  62 |     text-decoration: none;
  63 | }
  64 | 
  65 | nav .social-logo {
  66 |     display: block;
  67 |     width: 28px;
  68 |     height: 28px;
  69 | }
  70 | 
  71 | ul,
  72 | ol {
  73 |     padding: 0;
  74 |     margin: 0;
  75 | }
  76 | 
  77 | body {
  78 |     font-family: var(--font-family-main);
  79 |     padding: 0;
  80 |     margin: 0;
  81 |     font-size: 14px;
  82 |     width: 100%;
  83 |     max-width: 2400px;
  84 | }
  85 | 
  86 | @media (min-width: 800px) {
  87 |     body {
  88 |         font-size: 16px;
  89 |     }
  90 |     nav {
  91 |         min-height: 60px;
  92 |     }
  93 |     nav .social-logo {
  94 |         width: 32px;
  95 |         height: 32px;
  96 |     }
  97 |     nav > ul.left {
  98 |         padding-left: 20px;
  99 |     }
 100 | }
 101 | 
 102 | .size-boxes {
 103 |     display: none;
 104 | }
 105 | 
 106 | #html,
 107 | #animation-transitions {
 108 |     padding-top: 60px;
 109 | }
 110 | 
 111 | .size-box {
 112 |     z-index: 1000;
 113 |     position: fixed;
 114 |     height: var(--height-size-box);
 115 |     width: var(--height-size-box);
 116 |     top: 52px;
 117 |     color: var(--font-color-light);
 118 |     text-align: center;
 119 |     line-height: var(--height-size-box);
 120 | }
 121 | 
 122 | .size-box.box-1 {
 123 |     left: calc(0 * var(--height-size-box));
 124 |     background-color: rgba(0%, 0%, 100%, 0.7);
 125 | }
 126 | .size-box.box-2 {
 127 |     left: calc(1 * var(--height-size-box));
 128 |     background-color: rgba(20%, 0%, 80%, 0.7);
 129 | }
 130 | .size-box.box-3 {
 131 |     left: calc(2 * var(--height-size-box));
 132 |     background-color: rgba(40%, 0%, 60%, 0.7);
 133 | }
 134 | .size-box.box-4 {
 135 |     left: calc(3 * var(--height-size-box));
 136 |     background-color: rgba(60%, 0%, 40%, 0.7);
 137 | }
 138 | .size-box.box-5 {
 139 |     left: calc(4 * var(--height-size-box));
 140 |     background-color: rgba(80%, 0%, 20%, 0.7);
 141 | }
 142 | .size-box.box-6 {
 143 |     left: calc(5 * var(--height-size-box));
 144 |     background-color: rgba(0%, 0%, 100%, 0.7);
 145 | }
 146 | .size-box.box-7 {
 147 |     left: calc(6 * var(--height-size-box));
 148 |     background-color: rgba(20%, 0%, 80%, 0.7);
 149 | }
 150 | .size-box.box-8 {
 151 |     left: calc(7 * var(--height-size-box));
 152 |     background-color: rgba(40%, 0%, 60%, 0.7);
 153 | }
 154 | .size-box.box-9 {
 155 |     left: calc(8 * var(--height-size-box));
 156 |     background-color: rgba(60%, 0%, 40%, 0.7);
 157 | }
 158 | .size-box.box-10 {
 159 |     left: calc(9 * var(--height-size-box));
 160 |     background-color: rgba(80%, 0%, 20%, 0.7);
 161 | }
 162 | .size-box.box-11 {
 163 |     left: calc(10 * var(--height-size-box));
 164 |     background-color: rgba(0%, 0%, 100%, 0.7);
 165 | }
 166 | .size-box.box-12 {
 167 |     left: calc(11 * var(--height-size-box));
 168 |     background-color: rgba(20%, 0%, 80%, 0.7);
 169 | }
 170 | .size-box.box-13 {
 171 |     left: calc(12 * var(--height-size-box));
 172 |     background-color: rgba(40%, 0%, 60%, 0.7);
 173 | }
 174 | .size-box.box-14 {
 175 |     left: calc(13 * var(--height-size-box));
 176 |     background-color: rgba(60%, 0%, 40%, 0.7);
 177 | }
 178 | .size-box.box-15 {
 179 |     left: calc(14 * var(--height-size-box));
 180 |     background-color: rgba(80%, 0%, 20%, 0.7);
 181 | }
 182 | .size-box.box-16 {
 183 |     left: calc(15 * var(--height-size-box));
 184 |     background-color: rgba(0%, 0%, 100%, 0.7);
 185 | }
 186 | .size-box.box-17 {
 187 |     left: calc(16 * var(--height-size-box));
 188 |     background-color: rgba(20%, 0%, 80%, 0.7);
 189 | }
 190 | .size-box.box-18 {
 191 |     left: calc(17 * var(--height-size-box));
 192 |     background-color: rgba(40%, 0%, 60%, 0.7);
 193 | }
 194 | .size-box.box-19 {
 195 |     left: calc(18 * var(--height-size-box));
 196 |     background-color: rgba(60%, 0%, 40%, 0.7);
 197 | }
 198 | .size-box.box-20 {
 199 |     left: calc(19 * var(--height-size-box));
 200 |     background-color: rgba(80%, 0%, 20%, 0.7);
 201 | }
 202 | .size-box.box-21 {
 203 |     left: calc(20 * var(--height-size-box));
 204 |     background-color: rgba(0%, 0%, 100%, 0.7);
 205 | }
 206 | .size-box.box-22 {
 207 |     left: calc(21 * var(--height-size-box));
 208 |     background-color: rgba(20%, 0%, 80%, 0.7);
 209 | }
 210 | .size-box.box-23 {
 211 |     left: calc(22 * var(--height-size-box));
 212 |     background-color: rgba(40%, 0%, 60%, 0.7);
 213 | }
 214 | .size-box.box-24 {
 215 |     left: calc(23 * var(--height-size-box));
 216 |     background-color: rgba(60%, 0%, 40%, 0.7);
 217 | }
 218 | /* Snippets explain a CSS property, HTML element, 
 219 | or a single concept. */
 220 | .snippet {
 221 |     vertical-align: top;
 222 |     margin: 1vmin;
 223 |     background-color: var(--bg-color);
 224 |     border-radius: 6px;
 225 |     overflow: hidden;
 226 |     box-sizing: border-box;
 227 | }
 228 | 
 229 | @media (min-width: 800px) {
 230 |     .snippet {
 231 |         margin: 8px;
 232 |     }
 233 | }
 234 | 
 235 | .container {
 236 |     margin: 0;
 237 |     background-color: var(--bg-color-light);
 238 |     border: var(--border-container);
 239 |     border-top: none;
 240 |     border-top-left-radius: 0;
 241 |     border-top-right-radius: 0;
 242 | }
 243 | 
 244 | h1,
 245 | h2,
 246 | h3,
 247 | h4,
 248 | h5,
 249 | h6 {
 250 |     margin: 0;
 251 |     padding: 6px 12px;
 252 | }
 253 | 
 254 | .snippet > h2 {
 255 |     background-color: var(--bg-color-header);
 256 |     color: var(--font-color-light);
 257 |     font-size: 1em;
 258 |     font-weight: normal;
 259 | }
 260 | 
 261 | section > h1 {
 262 |     grid-column: 1/-1;
 263 | }
 264 | 
 265 | section > h2 {
 266 |     border-radius: 8px;
 267 |     border: var(--border-header);
 268 |     color: var(--font-color-dark);
 269 |     display: block;
 270 |     font-size: 1.4em;
 271 |     font-weight: normal;
 272 |     grid-column: 1/-1;
 273 |     margin-top: 1em;
 274 |     padding: 0.5em 0.75em;
 275 | }
 276 | 
 277 | @media (min-width: 900px) {
 278 |     section > h2 {
 279 |         font-size: 1.5em;
 280 |     }
 281 | }
 282 | 
 283 | section > h3,
 284 | .snippet > h3,
 285 | .callout > h3,
 286 | .container > h3 {
 287 |     font-size: 0.9em;
 288 |     font-weight: normal;
 289 |     color: var(--font-color-medium);
 290 |     background-color: initial;
 291 | }
 292 | 
 293 | section > h3 {
 294 |     grid-column: 1/-1;
 295 | }
 296 | 
 297 | code,
 298 | .code,
 299 | span.code {
 300 |     font-family: var(--font-family-code);
 301 |     white-space: pre;
 302 | }
 303 | 
 304 | code,
 305 | span.code {
 306 |     color: var(--font-color-dark);
 307 | }
 308 | 
 309 | code {
 310 |     display: block;
 311 |     font-size: 0.85em;
 312 | }
 313 | 
 314 | .callout {
 315 |     display: flex;
 316 |     flex-direction: column;
 317 |     align-items: left;
 318 |     margin: 16px 24px;
 319 | }
 320 | 
 321 | @media (min-width: 600px) {
 322 |     .callout {
 323 |         align-items: center;
 324 |         margin: 16px 0;
 325 |     }
 326 | }
 327 | 
 328 | #css-positioning-fixed {
 329 |     border: 4px double black;
 330 | }
 331 | 
 332 | .codeblock {
 333 |     padding: 16px 24px;
 334 |     overflow: scroll;
 335 | }
 336 | 
 337 | .codeblock.ex-header {
 338 |     margin: 8px;
 339 |     padding: 0;
 340 | }
 341 | 
 342 | .ex-header h1 {
 343 |     font-size: 2em;
 344 | }
 345 | 
 346 | .codeblock > hr {
 347 |     border-top: var(--border-subtle);
 348 | }
 349 | 
 350 | /* Formatting code in headers. Default header padding 
 351 | makes code look too loose. */
 352 | .code.top {
 353 |     padding-bottom: 0;
 354 | }
 355 | 
 356 | .code.mid {
 357 |     padding-top: 0;
 358 |     padding-bottom: 0;
 359 | }
 360 | 
 361 | .code.bot {
 362 |     padding-top: 0;
 363 | }
 364 | 
 365 | code.subtle {
 366 |     color: var(--font-color-medium);
 367 |     font-size: 0.5em;
 368 |     padding: 4px;
 369 | }
 370 | 
 371 | .tooltip {
 372 |     background-color: transparent;
 373 |     border: 1px solid transparent;
 374 |     border-radius: 8px;
 375 |     color: transparent;
 376 |     font-size: 0.7em;
 377 |     position: absolute;
 378 |     transition: 0.5s;
 379 |     padding: 0.5em 1em;
 380 |     margin-top: 0;
 381 |     z-index: 1000;
 382 | }
 383 | 
 384 | .ex-tooltip:hover > .tooltip,
 385 | .codeblock:hover > .tooltip {
 386 |     background-color: yellow;
 387 |     border-color: black;
 388 |     color: black;
 389 |     font-size: 1.2em;
 390 | }
 391 | 
 392 | .ex-transition-translate .box {
 393 |     transition: 1s all;
 394 | }
 395 | 
 396 | .ex-transition-translate:hover .box {
 397 |     transform: translateX(200px);
 398 | }
 399 | 
 400 | section {
 401 |     padding: 0 0;
 402 |     margin: 0 0.5em;
 403 | }
 404 | 
 405 | @media (min-width: 600px) {
 406 |     section {
 407 |         margin: 0 1em;
 408 |     }
 409 | }
 410 | 
 411 | .box,
 412 | .bar,
 413 | .content-box {
 414 |     background-color: var(--bg-color-box);
 415 |     color: var(--font-color-light);
 416 | }
 417 | 
 418 | .box.transform {
 419 |     line-height: 1.5em;
 420 | }
 421 | 
 422 | .box,
 423 | .bar {
 424 |     font-family: var(--font-family-code);
 425 |     display: inline-block;
 426 |     border-radius: 4px;
 427 |     min-height: 1.5em;
 428 |     text-align: center;
 429 |     vertical-align: middle;
 430 | }
 431 | 
 432 | .box.to-clear {
 433 |     padding: 8px;
 434 | }
 435 | 
 436 | .bar.vertical {
 437 |     min-height: 0;
 438 |     min-width: 1.5em;
 439 | }
 440 | 
 441 | .box {
 442 |     min-width: 1.5em;
 443 |     margin: 4px;
 444 | }
 445 | 
 446 | .box.absolute {
 447 |     position: absolute;
 448 |     left: auto;
 449 |     margin: 0;
 450 | }
 451 | 
 452 | .box.placeholder {
 453 |     background-color: var(--bg-color-light);
 454 |     color: var(--font-color-medium);
 455 | }
 456 | 
 457 | .box.invisible {
 458 |     visibility: hidden;
 459 |     margin: 16px;
 460 | }
 461 | 
 462 | .box.bigger {
 463 |     font-size: 1.5em;
 464 | }
 465 | 
 466 | .box.biggest {
 467 |     font-size: 2em;
 468 | }
 469 | 
 470 | .box.flatter {
 471 |     min-height: 8px;
 472 |     margin: 2px;
 473 | }
 474 | 
 475 | .box.wider {
 476 |     min-width: 3em;
 477 | }
 478 | 
 479 | .fullwidth {
 480 |     width: 100%;
 481 | }
 482 | 
 483 | .box.nomargin {
 484 |     margin: 0;
 485 | }
 486 | 
 487 | .box.square {
 488 |     border-radius: 0;
 489 | }
 490 | 
 491 | /* Styles for creating figures related to the Box model */
 492 | 
 493 | .margin-box,
 494 | .border-box,
 495 | .padding-box,
 496 | .content-box {
 497 |     padding: 1em;
 498 |     padding-top: 0em;
 499 | }
 500 | 
 501 | .ex-box-sizing {
 502 |     max-width: 11em;
 503 | }
 504 | 
 505 | .border-box {
 506 |     background-color: lightgrey;
 507 | }
 508 | 
 509 | .ex-margin {
 510 |     display: inline-block;
 511 |     border: var(--border-subtle);
 512 | }
 513 | 
 514 | .flex-row {
 515 |     display: flex;
 516 |     justify-content: center;
 517 |     align-items: center;
 518 | }
 519 | 
 520 | .flex-column {
 521 |     display: flex;
 522 |     align-items: center;
 523 |     flex-direction: column;
 524 | }
 525 | 
 526 | .ex-padding {
 527 |     border: var(--border-subtle);
 528 |     margin: 0;
 529 |     position: relative;
 530 |     border-radius: 0;
 531 | }
 532 | 
 533 | .ex-padding,
 534 | .padding-box {
 535 |     background-color: hsl(120, 20%, 75%);
 536 | }
 537 | 
 538 | .padding-color {
 539 |     margin: 0;
 540 | }
 541 | 
 542 | .content-box {
 543 |     padding: 0.5em;
 544 |     text-indent: 0;
 545 | }
 546 | 
 547 | .margin-box,
 548 | .ex-margin {
 549 |     background-color: hsla(50, 100%, 50%, 0.2);
 550 | }
 551 | 
 552 | .margin-box {
 553 |     text-indent: -0.75em;
 554 | }
 555 | 
 556 | .inline {
 557 |     display: inline;
 558 |     padding: 0;
 559 |     margin: 0;
 560 | }
 561 | 
 562 | .block {
 563 |     display: block;
 564 | }
 565 | 
 566 | .none {
 567 |     display: none;
 568 | }
 569 | 
 570 | .inline-block {
 571 |     display: inline-block;
 572 |     padding: 0;
 573 |     margin: 0;
 574 | }
 575 | 
 576 | .ex-positioned {
 577 |     position: relative;
 578 |     border: 4px double black;
 579 |     border-radius: 4px;
 580 | }
 581 | 
 582 | .flex {
 583 |     border: var(--border-flex);
 584 |     border-radius: 4px;
 585 |     display: flex;
 586 |     --taller-height: 5em;
 587 | }
 588 | 
 589 | .flex.inline {
 590 |     display: inline-flex;
 591 |     vertical-align: middle;
 592 | }
 593 | 
 594 | .flex.ex-wrap {
 595 |     width: 10em;
 596 | }
 597 | 
 598 | .flex.ex-align-items {
 599 |     height: var(--taller-height);
 600 | }
 601 | 
 602 | .flex.ex-align-content {
 603 |     height: var(--taller-height);
 604 |     flex-wrap: wrap;
 605 | }
 606 | 
 607 | .flex.ex-align-self {
 608 |     height: var(--taller-height);
 609 | }
 610 | 
 611 | .flex.ex-flow {
 612 |     border: none;
 613 | }
 614 | 
 615 | .ex-css-height {
 616 |     display: flex;
 617 |     align-items: flex-end;
 618 | }
 619 | 
 620 | div.line:after,
 621 | div.line-short:after {
 622 |     position: absolute;
 623 |     content: "";
 624 |     display: inline-block;
 625 |     border-top: var(--border-baseline);
 626 |     width: 7em;
 627 |     margin-left: 8px;
 628 | }
 629 | 
 630 | div.line-short:after {
 631 |     width: 3.5em;
 632 |     /* margin-left: 12px; */
 633 | }
 634 | 
 635 | div.columns {
 636 |     display: flex;
 637 |     flex-wrap: wrap;
 638 |     flex-direction: row;
 639 |     justify-content: flex-start;
 640 | }
 641 | 
 642 | div.column {
 643 |     display: flex;
 644 |     flex-direction: column;
 645 | }
 646 | 
 647 | /* For the flexbox 'order' property snippet. */
 648 | .first,
 649 | .second {
 650 |     order: 1;
 651 | }
 652 | 
 653 | .font-example {
 654 |     display: inline-block;
 655 |     font-size: 32px;
 656 | }
 657 | 
 658 | a:link,
 659 | a:visited {
 660 |     color: darkblue;
 661 |     text-decoration: none;
 662 | }
 663 | 
 664 | .nudge-top {
 665 |     padding-top: 10px;
 666 | }
 667 | 
 668 | .float-left {
 669 |     float: left;
 670 | }
 671 | 
 672 | .float-right {
 673 |     float: right;
 674 | }
 675 | 
 676 | .ex-overflow-box {
 677 |     display: inline-block;
 678 |     border: var(--border-subtle);
 679 |     width: 250px;
 680 |     height: 80px;
 681 | }
 682 | 
 683 | .ex-overflow-box.hidden {
 684 |     overflow: hidden;
 685 | }
 686 | 
 687 | .ex-overflow-box.scroll {
 688 |     overflow: scroll;
 689 | }
 690 | 
 691 | .ex-overflow-box.visible {
 692 |     overflow: visible;
 693 | }
 694 | 
 695 | .text-example {
 696 |     border-bottom: var(--border-separator);
 697 | }
 698 | 
 699 | .text-example.align {
 700 |     max-width: 8em;
 701 | }
 702 | 
 703 | .ex-border-width {
 704 |     border-color: black;
 705 |     border-style: solid;
 706 | }
 707 | 
 708 | .ex-float,
 709 | .ex-clear {
 710 |     width: 14em;
 711 |     border: var(--border-subtle);
 712 |     padding: 4px;
 713 |     display: inline-block;
 714 |     margin: 4px;
 715 | }
 716 | 
 717 | .ex-clear-row {
 718 |     display: flex;
 719 |     align-items: stretch;
 720 | }
 721 | 
 722 | .ex-border.dark,
 723 | .ex-border.light {
 724 |     width: 1.5em;
 725 |     height: 1.5em;
 726 |     border-radius: 4px;
 727 |     background-color: white;
 728 |     border: 3px solid black;
 729 | }
 730 | 
 731 | .ex-border.light {
 732 |     background-color: transparent;
 733 | }
 734 | 
 735 | .ex-border-side {
 736 |     border: 3px solid black;
 737 |     border-radius: 0;
 738 | }
 739 | 
 740 | .ex-border-side.single {
 741 |     border-width: 0;
 742 | }
 743 | 
 744 | .ex-fixed {
 745 |     position: fixed;
 746 |     background-color: var(--bg-color-semitransparent);
 747 |     min-width: 30%;
 748 |     min-height: 30%;
 749 |     display: flex;
 750 |     justify-content: center;
 751 |     align-items: center;
 752 | }
 753 | 
 754 | .ex-fixed > code {
 755 |     color: var(--font-color-light);
 756 |     font-size: 1em;
 757 | }
 758 | 
 759 | .table {
 760 |     display: table;
 761 | }
 762 | 
 763 | table {
 764 |     border-collapse: collapse;
 765 |     border-spacing: 0;
 766 | }
 767 | 
 768 | .ex-table,
 769 | .ex-element,
 770 | .ex-form,
 771 | .ex-list,
 772 | .ex-keyframe {
 773 |     border-bottom: var(--border-separator);
 774 |     padding-left: 8px;
 775 |     padding-bottom: 8px;
 776 | }
 777 | 
 778 | .ex-full-table {
 779 |     background-color: initial;
 780 | }
 781 | 
 782 | .ex-full-table td {
 783 |     border: var(--border-table);
 784 | }
 785 | 
 786 | .ex-full-table th {
 787 |     width: 40%;
 788 | }
 789 | 
 790 | .row {
 791 |     display: table-row;
 792 | }
 793 | 
 794 | .center {
 795 |     text-align: center;
 796 | }
 797 | 
 798 | td {
 799 |     padding: 8px;
 800 |     height: 1em;
 801 |     width: 1em;
 802 |     text-align: center;
 803 | }
 804 | 
 805 | .row > .codeblock {
 806 |     display: table-cell;
 807 | }
 808 | 
 809 | table.border,
 810 | tr.border,
 811 | td.border {
 812 |     border: var(--border-table);
 813 | }
 814 | 
 815 | table.column-borders td + td {
 816 |     border-left: var(--border-table);
 817 | }
 818 | 
 819 | table.row-borders tr + tr {
 820 |     border-top: var(--border-table);
 821 | }
 822 | 
 823 | table.all-borders td {
 824 |     border: var(--border-table);
 825 | }
 826 | 
 827 | .ex-caption {
 828 |     /* padding: 12px 36px; */
 829 |     padding: 8px;
 830 |     border-bottom: var(--border-separator);
 831 | }
 832 | 
 833 | .highlight-border {
 834 |     border: 2px solid red;
 835 | }
 836 | 
 837 | .highlight {
 838 |     background-color: var(--bg-color-highlight);
 839 |     color: var(--font-color-light);
 840 | }
 841 | 
 842 | .ex-vertical-align {
 843 |     display: flex;
 844 | }
 845 | 
 846 | .ex-vertical-align-cell {
 847 |     border: var(--border-table);
 848 |     width: 4em;
 849 |     height: 5em;
 850 |     text-align: center;
 851 | }
 852 | 
 853 | .cell > .codeblock {
 854 |     padding: 0 0 8px 0;
 855 | }
 856 | 
 857 | .ex-vertical-align-text {
 858 |     display: inline-block;
 859 |     border-bottom: var(--border-separator);
 860 |     white-space: nowrap;
 861 | }
 862 | 
 863 | .ex-align-box {
 864 |     display: inline-flex;
 865 |     align-items: center;
 866 |     min-width: 3em;
 867 |     min-height: 3em;
 868 |     background-color: var(--bg-color-box);
 869 |     border-radius: 4px;
 870 |     margin: 4px;
 871 |     justify-content: center;
 872 |     text-align: center;
 873 |     color: var(--font-color-light);
 874 | }
 875 | 
 876 | .ex-zindex {
 877 |     position: relative;
 878 |     height: 6em;
 879 |     border-bottom: var(--border-separator);
 880 | }
 881 | 
 882 | .box-zindex {
 883 |     align-items: flex-end;
 884 |     background-color: var(--bg-color-box);
 885 |     bottom: 30px;
 886 |     color: var(--font-color-light);
 887 |     display: flex;
 888 |     height: 3em;
 889 |     justify-content: flex-end;
 890 |     left: 30px;
 891 |     padding: 4px;
 892 |     position: relative;
 893 |     width: 3em;
 894 | }
 895 | 
 896 | .box-zindex.placeholder {
 897 |     align-items: flex-start;
 898 |     font-size: 1em;
 899 |     left: 0;
 900 |     justify-content: flex-start;
 901 |     top: 0;
 902 | }
 903 | 
 904 | .stack {
 905 |     grid-column: 1/-1;
 906 |     display: inline-flex;
 907 |     flex-direction: column;
 908 |     align-items: stretch;
 909 | }
 910 | 
 911 | .ex-full-table-elements {
 912 |     display: flex;
 913 |     flex-direction: column;
 914 | }
 915 | 
 916 | @media (min-width: 500px) {
 917 |     .ex-full-table-elements {
 918 |         flex-direction: row;
 919 |     }
 920 | }
 921 | 
 922 | .ex-full-table-elements > code {
 923 |     padding-right: 36px;
 924 | }
 925 | 
 926 | .ex-full-table-elements th {
 927 |     border: 2px solid black;
 928 | }
 929 | 
 930 | .ex-css-element > code {
 931 |     font-family: var(--font-family-code);
 932 |     font-weight: bold;
 933 |     font-size: 1em;
 934 | }
 935 | 
 936 | .ex-css-element {
 937 |     border-bottom: var(--border-separator);
 938 |     padding: 0 0 8px 8px;
 939 | }
 940 | 
 941 | .ex-css {
 942 |     display: block;
 943 |     flex-wrap: wrap;
 944 |     max-width: 500px;
 945 |     justify-content: space-between;
 946 | }
 947 | 
 948 | .ps-link:link {
 949 |     background-color: var(--bg-color-link);
 950 | }
 951 | 
 952 | .ps-link:visited {
 953 |     background-color: var(--bg-color-visited);
 954 | }
 955 | 
 956 | .ps-link:hover {
 957 |     background-color: var(--bg-color-hover);
 958 | }
 959 | 
 960 | .ps-link:active {
 961 |     background-color: var(--bg-color-active);
 962 | }
 963 | 
 964 | .ps-active:active {
 965 |     background-color: var(--bg-color-active);
 966 | }
 967 | 
 968 | .ps-hover:hover {
 969 |     background-color: var(--bg-color-hover);
 970 | }
 971 | 
 972 | .ps-target,
 973 | .ps-active,
 974 | .ps-hover,
 975 | .ps-plain {
 976 |     background-color: var(--bg-color-visited);
 977 | }
 978 | 
 979 | .ps-target:target {
 980 |     background-color: var(--bg-color-active);
 981 | }
 982 | 
 983 | .ex-pseudo {
 984 |     border-bottom: var(--border-separator);
 985 |     padding-bottom: 8px;
 986 | }
 987 | 
 988 | .ex-pseudo > a {
 989 |     display: block;
 990 |     padding: 8px;
 991 | }
 992 | 
 993 | .ps-after::after {
 994 |     content: " The added content.";
 995 |     color: var(--font-color-added);
 996 | }
 997 | 
 998 | .ps-before::before {
 999 |     content: " The added content.";
1000 |     color: var(--font-color-added);
1001 | }
1002 | 
1003 | .underline {
1004 |     position: relative;
1005 | }
1006 | 
1007 | .underline::after {
1008 |     position: absolute;
1009 |     content: "";
1010 |     display: block;
1011 |     border-top: var(--border-subtle);
1012 |     width: 70%;
1013 | }
1014 | 
1015 | .overline {
1016 |     position: relative;
1017 | }
1018 | 
1019 | .overline::before {
1020 |     position: absolute;
1021 |     content: "";
1022 |     display: block;
1023 |     border-bottom: var(--border-subtle);
1024 |     width: 70%;
1025 | }
1026 | 
1027 | .transition .box {
1028 |     margin-left: 0%;
1029 |     transition: 1s;
1030 | }
1031 | 
1032 | .transition:hover .box {
1033 |     margin-left: 80%;
1034 | }
1035 | 
1036 | .ex-transition.property .box {
1037 |     transition: 2s;
1038 |     color: var(--font-color-dark);
1039 | }
1040 | 
1041 | .ex-transition.property {
1042 |     transition: 2s;
1043 |     --bg-transition: red;
1044 |     --font-color-transition: white;
1045 |     --margin-transition: 80%;
1046 | }
1047 | 
1048 | .ex-transition:hover.property.all .box {
1049 |     background-color: var(--bg-transition);
1050 |     color: var(--font-color-transition);
1051 |     margin-left: var(--margin-transition);
1052 | }
1053 | 
1054 | .ex-transition:hover.property.color .box {
1055 |     color: var(--font-color-transition);
1056 | }
1057 | 
1058 | .ex-transition:hover.property.margin .box {
1059 |     margin-left: var(--margin-transition);
1060 | }
1061 | 
1062 | .ex-transition:hover.property.background .box {
1063 |     background-color: var(--bg-transition);
1064 | }
1065 | 
1066 | .ex-transition-timing-function,
1067 | .ex-animation-timing-function {
1068 |     display: grid;
1069 |     grid-template-columns: 1fr 1fr;
1070 |     grid-template-rows: repeat(5, 1fr);
1071 |     grid-auto-flow: column;
1072 | }
1073 | 
1074 | .animation:hover .box {
1075 |     animation: slideright 1s infinite linear;
1076 | }
1077 | 
1078 | .animation.alternate .box {
1079 |     animation-direction: alternate;
1080 | }
1081 | 
1082 | .animation.ex-animation-fill-mode:hover .box {
1083 |     animation: slideright 1s 1 1s, colorshift 1s 1 1s;
1084 | }
1085 | 
1086 | .animation:hover .fillmode-delay {
1087 |     animation: showblue 1s step-start;
1088 | }
1089 | 
1090 | .animation:hover .fillmode-animate {
1091 |     animation: showred 1s step-start 1s;
1092 | }
1093 | 
1094 | .animation:hover .fillmode-end {
1095 |     animation: showblack 0.1s step-start 2s forwards;
1096 | }
1097 | 
1098 | .animation .fillmode-delay,
1099 | .animation .fillmode-animate,
1100 | .animation .fillmode-end {
1101 |     color: transparent;
1102 | }
1103 | 
1104 | .animation:hover .fillmode-initial {
1105 |     color: transparent;
1106 | }
1107 | 
1108 | .animation:hover .box.backgroundcolor {
1109 |     animation: showbackground 2s forwards;
1110 | }
1111 | 
1112 | .animation:hover .box.size {
1113 |     animation: growsize 2s forwards;
1114 | }
1115 | 
1116 | @keyframes slideright {
1117 |     from {
1118 |         margin-left: 0%;
1119 |     }
1120 |     to {
1121 |         margin-left: 80%;
1122 |     }
1123 | }
1124 | 
1125 | @keyframes colorshift {
1126 |     from {
1127 |         color: blue;
1128 |     }
1129 |     to {
1130 |         color: red;
1131 |     }
1132 | }
1133 | 
1134 | @keyframes showblue {
1135 |     to {
1136 |         color: blue;
1137 |     }
1138 | }
1139 | @keyframes showred {
1140 |     to {
1141 |         color: red;
1142 |     }
1143 | }
1144 | 
1145 | @keyframes showblack {
1146 |     to {
1147 |         color: black;
1148 |     }
1149 | }
1150 | 
1151 | @keyframes showbackground {
1152 |     from {
1153 |         background-color: blue;
1154 |     }
1155 |     to {
1156 |         background-color: red;
1157 |     }
1158 | }
1159 | 
1160 | @keyframes growsize {
1161 |     from {
1162 |         height: 1em;
1163 |         width: 1em;
1164 |     }
1165 |     to {
1166 |         height: 4em;
1167 |         width: 4em;
1168 |     }
1169 | }
1170 | 
1171 | /* This adds space before the target of a link, to put the target below the navbar. */
1172 | /* XXX Broken by grid layout? */
1173 | :target:before {
1174 |     content: "";
1175 |     display: block;
1176 |     height: 60px;
1177 |     margin: -60px 0 0;
1178 | }
1179 | 
1180 | /* Example cursor animation */
1181 | .animation:hover .cursor {
1182 |     animation: cursor 0.8s infinite step-end;
1183 | }
1184 | 
1185 | .cursor {
1186 |     height: 80px;
1187 |     border-left: 8px solid black;
1188 | }
1189 | 
1190 | @keyframes cursor {
1191 |     50% {
1192 |         border-color: transparent;
1193 |     }
1194 | }
1195 | 
1196 | .animation:hover .animated {
1197 |     animation-iteration-count: infinite;
1198 |     animation-duration: 1.5s;
1199 | }
1200 | 
1201 | .ex-transform {
1202 |     display: inline-block;
1203 |     position: relative;
1204 |     perspective: 100px;
1205 | }
1206 | 
1207 | .ex-transform.lr-border {
1208 |     border: var(--border-guides);
1209 |     border-width: 0 1px;
1210 |     border-radius: 0;
1211 | }
1212 | 
1213 | .ex-transform.tb-border {
1214 |     border: var(--border-guides);
1215 |     border-width: 1px 0;
1216 |     border-radius: 0;
1217 | }
1218 | 
1219 | .ex-translate {
1220 |     width: 60px;
1221 |     height: 60px;
1222 |     border: var(--border-bounds);
1223 |     perspective: 60px;
1224 |     perspective-origin: top left;
1225 | }
1226 | 
1227 | .ex-perspective {
1228 |     height: 80px;
1229 |     width: 50px;
1230 |     position: relative;
1231 | }
1232 | 
1233 | .ex-perspective {
1234 |     margin: 10px 0 -25px 10px;
1235 | }
1236 | 
1237 | .ex-perspective.right-bottom {
1238 |     perspective-origin: 300% 200%;
1239 | }
1240 | 
1241 | .ex-perspective.left-bottom {
1242 |     perspective-origin: -300% 200%;
1243 | }
1244 | 
1245 | .ex-perspective.center {
1246 |     perspective-origin: 50% 50%;
1247 |     margin: 0 0 -30px 0;
1248 | }
1249 | 
1250 | .ex-perspective.right-top {
1251 |     perspective-origin: 300% -200%;
1252 | }
1253 | 
1254 | .ex-perspective.left-top {
1255 |     perspective-origin: -300% -200%;
1256 |     /* margin: 20px; */
1257 |     /* margin-bottom: 0; */
1258 | }
1259 | 
1260 | .cube {
1261 |     perspective: 400px;
1262 |     transform-style: preserve-3d;
1263 |     backface-visibility: visible;
1264 | }
1265 | 
1266 | .face {
1267 |     position: absolute;
1268 |     width: 40px;
1269 |     height: 40px;
1270 |     color: white;
1271 |     line-height: 40px;
1272 |     font-size: 2em;
1273 |     text-align: center;
1274 | }
1275 | 
1276 | .face.front {
1277 |     transform: translateZ(20px);
1278 |     background-color: rgba(30%, 30%, 30%, 0.7);
1279 | }
1280 | 
1281 | .face.top {
1282 |     transform: rotateX(90deg) translateZ(20px);
1283 |     background-color: rgba(0%, 100%, 0%, 0.7);
1284 | }
1285 | 
1286 | .face.right {
1287 |     transform: rotateY(90deg) translateZ(20px);
1288 |     background-color: rgba(0%, 0%, 100%, 0.7);
1289 | }
1290 | 
1291 | .face.left {
1292 |     transform: rotateY(-90deg) translateZ(20px);
1293 |     background-color: rgba(100%, 0%, 0%, 0.7);
1294 | }
1295 | 
1296 | .face.bottom {
1297 |     transform: rotateX(-90deg) translateZ(20px);
1298 |     background-color: rgba(100%, 0%, 100%, 0.7);
1299 | }
1300 | 
1301 | .face.back {
1302 |     transform: rotateY(180deg) translateZ(20px);
1303 |     background-color: rgba(25%, 50%, 75%, 0.7);
1304 | }
1305 | 
1306 | table.transform-origin {
1307 |     margin: 16px 0 16px 16px;
1308 | }
1309 | 
1310 | .perspective {
1311 |     display: grid;
1312 |     grid-template-columns: repeat(2, 1fr);
1313 | }
1314 | 
1315 | .perspective > .codeblock {
1316 |     overflow: hidden;
1317 |     padding: 8px 16px;
1318 |     display: flex;
1319 |     align-items: center;
1320 |     flex-direction: column;
1321 | }
1322 | 
1323 | .ex-transform-origin {
1324 |     border: var(--border-bounds);
1325 |     display: inline-block;
1326 |     perspective: 100px;
1327 |     margin-bottom: 10px;
1328 | }
1329 | 
1330 | .transform-origin .codeblock {
1331 |     padding: 16px 16px 0 12px;
1332 | }
1333 | 
1334 | table.transform-origin > caption {
1335 |     margin-left: 15%;
1336 | }
1337 | 
1338 | .door {
1339 |     height: 40px;
1340 |     width: 40px;
1341 |     background-color: var(--bg-color-box);
1342 |     color: var(--font-color-light);
1343 |     line-height: 40px;
1344 |     text-align: center;
1345 |     font-size: 2em;
1346 | }
1347 | 
1348 | .door.rotate-y {
1349 |     transform: rotateY(60deg);
1350 | }
1351 | .door.rotate-y2 {
1352 |     transform: rotateY(-60deg);
1353 | }
1354 | .door.rotate-x {
1355 |     transform: rotateX(60deg);
1356 | }
1357 | .door.rotate-x2 {
1358 |     transform: rotateX(-60deg);
1359 | }
1360 | .door.rotate-z {
1361 |     transform: rotateZ(45deg);
1362 | }
1363 | 
1364 | .transform-origin td {
1365 |     text-align: left;
1366 | }
1367 | 
1368 | /* Card transition */
1369 | .ex-card:hover .card {
1370 |     transform: rotateY(180deg) translateX(100%);
1371 | }
1372 | 
1373 | .ex-card {
1374 |     perspective: 300px;
1375 | }
1376 | 
1377 | .card {
1378 |     transition: 0.7s;
1379 |     transform-style: preserve-3d;
1380 |     transform-origin: right;
1381 |     position: relative;
1382 | }
1383 | 
1384 | .card-front,
1385 | .card-back {
1386 |     backface-visibility: hidden;
1387 |     position: absolute;
1388 | }
1389 | 
1390 | .card-back {
1391 |     transform: rotateY(180deg) translateZ(1px);
1392 | }
1393 | 
1394 | /* Card styling */
1395 | .card {
1396 |     width: 100px;
1397 |     height: 100px;
1398 |     line-height: 100px;
1399 |     color: var(--font-color-light);
1400 | }
1401 | 
1402 | .card-front,
1403 | .card-back {
1404 |     width: 100%;
1405 |     height: 100%;
1406 |     text-align: center;
1407 |     font-size: 2em;
1408 | }
1409 | 
1410 | .card-front {
1411 |     background-color: var(--bg-color-box);
1412 | }
1413 | 
1414 | .card-back {
1415 |     background-color: purple;
1416 | }
1417 | 
1418 | #transform-rotate .codeblock {
1419 |     padding: 8px;
1420 | }
1421 | 
1422 | iframe {
1423 |     background-color: var(--bg-color-light);
1424 |     margin: 20px;
1425 |     margin-top: 0;
1426 | }
1427 | 
1428 | .ex-grid {
1429 |     display: grid;
1430 |     grid-gap: 4px;
1431 | }
1432 | 
1433 | .ex-grid.inline {
1434 |     display: inline-grid;
1435 | }
1436 | 
1437 | .ex-grid.template-rows {
1438 |     grid-template-columns: 1fr;
1439 | }
1440 | 
1441 | .grid-template-rows-container {
1442 |     display: grid;
1443 |     grid-template-columns: auto auto;
1444 |     align-items: flex-end;
1445 | }
1446 | 
1447 | .grid-column-container,
1448 | .grid-row-container {
1449 |     display: grid;
1450 |     grid-template-columns: 1fr 1fr 1fr;
1451 | }
1452 | 
1453 | .ex-grid > .box {
1454 |     padding: 0;
1455 |     margin: 0;
1456 |     border-radius: 0;
1457 | }
1458 | 
1459 | .ex-box-shadow {
1460 |     margin-bottom: 20px;
1461 | }
1462 | 
1463 | .ex-grid.grid-column {
1464 |     display: inline-grid;
1465 |     grid-template-columns: 1fr 1fr 1fr;
1466 | }
1467 | 
1468 | .ex-grid.grid-row {
1469 |     display: inline-grid;
1470 |     grid-template-rows: 1fr 1fr 1fr;
1471 |     grid-template-columns: 1fr 1fr;
1472 | }
1473 | 
1474 | .ex-grid.grid-area {
1475 |     display: inline-grid;
1476 |     grid-template-rows: 1fr 1fr 1fr;
1477 |     grid-template-columns: 1fr 1fr 1fr;
1478 | }
1479 | 
1480 | .ex-grid.grid-template-area {
1481 |     display: grid;
1482 | }
1483 | 
1484 | .grid-area-container {
1485 |     display: grid;
1486 |     grid-template-columns: repeat(2, auto);
1487 | }
1488 | 
1489 | .ex-grid.grid-auto-flow {
1490 |     display: inline-grid;
1491 |     grid-template-columns: repeat(3, 1fr);
1492 |     grid-template-rows: repeat(3, 1fr);
1493 | }
1494 | 
1495 | .grid-auto-flow-container {
1496 |     display: grid;
1497 |     grid-template-columns: auto auto auto;
1498 |     align-items: flex-end;
1499 |     grid-gap: 8px;
1500 | }
1501 | 
1502 | .grid-heading {
1503 |     padding-left: 20px;
1504 |     padding-top: 20px;
1505 | }
1506 | 
1507 | .ex-grid.grid-gap {
1508 |     display: inline-grid;
1509 |     grid-template-columns: 1fr 1fr;
1510 | }
1511 | 
1512 | .grid-gap-container {
1513 |     display: grid;
1514 |     grid-template-columns: repeat(3, 1fr);
1515 | }
1516 | 
1517 | /* Grids for laying out the cheat sheet itself */
1518 | 
1519 | .grid {
1520 |     display: grid;
1521 | }
1522 | 
1523 | .grid.col-5 {
1524 |     grid-template-columns: 1fr;
1525 | }
1526 | .grid.col-4 {
1527 |     grid-template-columns: 1fr;
1528 | }
1529 | .grid.col-3 {
1530 |     grid-template-columns: 1fr;
1531 | }
1532 | .grid.col-2 {
1533 |     grid-template-columns: 1fr;
1534 | }
1535 | 
1536 | .grid.center {
1537 |     align-items: center;
1538 | }
1539 | 
1540 | @media (min-width: 400px) {
1541 |     .grid.col-5 {
1542 |         grid-template-columns: repeat(2, 1fr);
1543 |     }
1544 |     .grid.col-4 {
1545 |         grid-template-columns: repeat(2, 1fr);
1546 |     }
1547 |     .grid.col-3 {
1548 |         grid-template-columns: repeat(1, 1fr);
1549 |     }
1550 |     .grid.col-2 {
1551 |         grid-template-columns: repeat(1, 1fr);
1552 |     }
1553 | }
1554 | 
1555 | @media (min-width: 500px) {
1556 |     .grid.col-5 {
1557 |         grid-template-columns: repeat(2, 1fr);
1558 |     }
1559 |     .grid.col-4 {
1560 |         grid-template-columns: repeat(2, 1fr);
1561 |     }
1562 |     .grid.col-3 {
1563 |         grid-template-columns: repeat(2, 1fr);
1564 |     }
1565 |     .grid.col-2 {
1566 |         grid-template-columns: repeat(1, 1fr);
1567 |     }
1568 | }
1569 | 
1570 | @media (min-width: 600px) {
1571 |     .grid.col-5 {
1572 |         grid-template-columns: repeat(4, 1fr);
1573 |     }
1574 |     .grid.col-4 {
1575 |         grid-template-columns: repeat(3, 1fr);
1576 |     }
1577 |     .grid.col-3 {
1578 |         grid-template-columns: repeat(3, 1fr);
1579 |     }
1580 |     .grid.col-2 {
1581 |         grid-template-columns: repeat(2, 1fr);
1582 |     }
1583 | }
1584 | 
1585 | @media (min-width: 1200px) {
1586 |     .grid.col-5 {
1587 |         grid-template-columns: repeat(5, 1fr);
1588 |     }
1589 |     .grid.col-4 {
1590 |         grid-template-columns: repeat(4, 1fr);
1591 |     }
1592 |     .grid.col-3 {
1593 |         grid-template-columns: repeat(3, 1fr);
1594 |     }
1595 |     .grid.col-2 {
1596 |         grid-template-columns: repeat(2, 1fr);
1597 |     }
1598 | }
1599 | 
1600 | section {
1601 |     display: grid;
1602 |     grid-column: 1/-1; /* Sections are nested. */
1603 | }
1604 | 
1605 | /* We choose sizes of 100px large column format because it has many divisors: 
1606 | 
1607 | Similarly the other breakpoints have the most divisors of smaller numbers:
1608 | 4 -- 1,2,4
1609 | 6 -- 1,2,3,6
1610 | 12 -- 1,2,3,4,6,12
1611 | 18 -- 1,2,3,6,9,18
1612 | 24 -- 1,2,3,4,6,8,12,24
1613 | */
1614 | @media (max-width: 400px) {
1615 |     section {
1616 |         grid-template-columns: repeat(1, 1fr);
1617 |     }
1618 | }
1619 | @media (min-width: 400px) {
1620 |     section {
1621 |         grid-template-columns: repeat(4, 1fr);
1622 |     }
1623 | }
1624 | @media (min-width: 600px) {
1625 |     section {
1626 |         grid-template-columns: repeat(6, 1fr);
1627 |     }
1628 | }
1629 | @media (min-width: 1200px) {
1630 |     section {
1631 |         grid-template-columns: repeat(12, 1fr);
1632 |     }
1633 | }
1634 | @media (min-width: 1800px) {
1635 |     section {
1636 |         grid-template-columns: repeat(18, 1fr);
1637 |     }
1638 | }
1639 | @media (min-width: 2400px) {
1640 |     section {
1641 |         grid-template-columns: repeat(24, 1fr);
1642 |     }
1643 | }
1644 | 
1645 | /* Grid layout - columns */
1646 | @media (max-width: 400px) {
1647 |     .snippet {
1648 |         grid-column: span 1;
1649 |     }
1650 |     .span-1 {
1651 |         grid-column: span 1;
1652 |     }
1653 |     .span-2 {
1654 |         grid-column: span 1;
1655 |     }
1656 |     .span-3 {
1657 |         grid-column: span 1;
1658 |     }
1659 |     .span-4 {
1660 |         grid-column: span 1;
1661 |     }
1662 |     .span-5 {
1663 |         grid-column: span 1;
1664 |     }
1665 |     .span-6 {
1666 |         grid-column: span 1;
1667 |     }
1668 |     .span-7 {
1669 |         grid-column: span 1;
1670 |     }
1671 |     .span-8 {
1672 |         grid-column: span 1;
1673 |     }
1674 |     .span-9 {
1675 |         grid-column: span 1;
1676 |     }
1677 |     .span-10 {
1678 |         grid-column: span 1;
1679 |     }
1680 |     .span-11 {
1681 |         grid-column: span 1;
1682 |     }
1683 |     .span-12 {
1684 |         grid-column: span 1;
1685 |     }
1686 | }
1687 | 
1688 | @media (min-width: 400px) {
1689 |     .snippet {
1690 |         grid-column: span 2;
1691 |     }
1692 |     .span-1 {
1693 |         grid-column: span 1;
1694 |     }
1695 |     .span-2 {
1696 |         grid-column: span 2;
1697 |     }
1698 |     .span-3 {
1699 |         grid-column: span 3;
1700 |     }
1701 |     .span-4 {
1702 |         grid-column: span 4;
1703 |     }
1704 |     .span-5 {
1705 |         grid-column: span 4;
1706 |     }
1707 |     .span-6 {
1708 |         grid-column: span 4;
1709 |     }
1710 |     .span-7 {
1711 |         grid-column: span 4;
1712 |     }
1713 |     .span-8 {
1714 |         grid-column: span 4;
1715 |     }
1716 |     .span-9 {
1717 |         grid-column: span 4;
1718 |     }
1719 |     .span-10 {
1720 |         grid-column: span 4;
1721 |     }
1722 |     .span-11 {
1723 |         grid-column: span 4;
1724 |     }
1725 |     .span-12 {
1726 |         grid-column: span 4;
1727 |     }
1728 | }
1729 | 
1730 | @media (min-width: 600px) {
1731 |     .snippet {
1732 |         grid-column: span 3;
1733 |     }
1734 |     .span-1 {
1735 |         grid-column: span 1;
1736 |     }
1737 |     .span-2 {
1738 |         grid-column: span 2;
1739 |     }
1740 |     .span-3 {
1741 |         grid-column: span 3;
1742 |     }
1743 |     .span-4 {
1744 |         grid-column: span 4;
1745 |     }
1746 |     .span-5 {
1747 |         grid-column: span 5;
1748 |     }
1749 |     .span-6 {
1750 |         grid-column: span 6;
1751 |     }
1752 |     .span-7 {
1753 |         grid-column: span 6;
1754 |     }
1755 |     .span-8 {
1756 |         grid-column: span 6;
1757 |     }
1758 |     .span-9 {
1759 |         grid-column: span 6;
1760 |     }
1761 |     .span-10 {
1762 |         grid-column: span 6;
1763 |     }
1764 |     .span-11 {
1765 |         grid-column: span 6;
1766 |     }
1767 |     .span-12 {
1768 |         grid-column: span 6;
1769 |     }
1770 | }
1771 | 
1772 | @media (min-width: 1200px) {
1773 |     .snippet {
1774 |         grid-column: span 3;
1775 |     }
1776 |     .span-1 {
1777 |         grid-column: span 1;
1778 |     }
1779 |     .span-2 {
1780 |         grid-column: span 2;
1781 |     }
1782 |     .span-3 {
1783 |         grid-column: span 3;
1784 |     }
1785 |     .span-4 {
1786 |         grid-column: span 4;
1787 |     }
1788 |     .span-5 {
1789 |         grid-column: span 5;
1790 |     }
1791 |     .span-6 {
1792 |         grid-column: span 6;
1793 |     }
1794 |     .span-7 {
1795 |         grid-column: span 7;
1796 |     }
1797 |     .span-8 {
1798 |         grid-column: span 8;
1799 |     }
1800 |     .span-9 {
1801 |         grid-column: span 9;
1802 |     }
1803 |     .span-10 {
1804 |         grid-column: span 10;
1805 |     }
1806 |     .span-11 {
1807 |         grid-column: span 11;
1808 |     }
1809 |     .span-12 {
1810 |         grid-column: span 12;
1811 |     }
1812 | }
1813 | 
1814 | /* Grid layout - rows */
1815 | .span-rows-1 {
1816 |     grid-row: span 1;
1817 | }
1818 | .span-rows-2 {
1819 |     grid-row: span 2;
1820 | }
1821 | .span-rows-3 {
1822 |     grid-row: span 3;
1823 | }
1824 | .span-rows-4 {
1825 |     grid-row: span 4;
1826 | }
1827 | .span-rows-5 {
1828 |     grid-row: span 5;
1829 | }
1830 | .span-rows-6 {
1831 |     grid-row: span 6;
1832 | }
1833 | 
1834 | #css-padding,
1835 | #css-margin {
1836 |     grid-column: 1/span 4;
1837 | }
1838 | 
1839 | #css-width {
1840 |     grid-column: 1/span 6;
1841 | }
1842 | 


--------------------------------------------------------------------------------