├── LICENSE ├── fixed-position-example.html ├── README.md ├── tools.html ├── animate.css ├── style.css └── animation.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Abbireddy Venkata Chandu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /fixed-position-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
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 |
27 |
28 | left:0;
top:0; 29 |
30 |
31 | left:0;
bottom:0; 32 |
33 |
34 | right:0;
top:0; 35 |
36 |
37 | right:0;
bottom:0; 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ```markdown 4 | # HTML Cheat Sheet 📝 5 | 6 | A quick reference guide to HTML, covering the most essential tags, attributes, and best practices for building web pages. 7 | 8 | ## 📚 Table of Contents 9 | - Basic Structure 10 | - Text Formatting 11 | - Links 12 | - Images 13 | - Lists 14 | - Tables 15 | - Forms 16 | - Multimedia 17 | - Semantic Elements 18 | 19 | --- 20 | 21 | ## Basic Structure 22 | ```html 23 | 24 | 25 | 26 | 27 | 28 | Document 29 | 30 | 31 |

Hello, World!

32 | 33 | 34 | ``` 35 | 36 | --- 37 | 38 | ## Text Formatting 39 | ```html 40 | Bold, Italic, Underline, Strikethrough 41 |

Heading 1

...
Heading 6
42 |

Paragraph

43 | ``` 44 | 45 | --- 46 | 47 | ## Links 48 | ```html 49 | Visit Example 50 | Internal Link 51 | Send Email 52 | ``` 53 | 54 | --- 55 | 56 | ## Images 57 | ```html 58 | Description 59 | ``` 60 | 61 | --- 62 | 63 | ## Lists 64 | ```html 65 | 66 | 70 | 71 | 72 |
    73 |
  1. First
    2. 74 |
  2. Second
    3. 75 |
76 | ``` 77 | 78 | --- 79 | 80 | ## Tables 81 | ```html 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
Header 1Header 2
Data 1Data 2
92 | ``` 93 | 94 | --- 95 | 96 | ## Forms 97 | ```html 98 |
99 | 100 | 101 | 102 |
103 | ``` 104 | 105 | --- 106 | 107 | ## Multimedia 108 | ```html 109 | 112 | 113 | 116 | ``` 117 | 118 | --- 119 | 120 | ## Semantic Elements 121 | ```html 122 |
Header Content
123 | 124 |
Main Content
125 | 126 | 127 | ``` 128 | 129 | --- 130 | 131 | ## 🌟 Contributing 132 | Feel free to contribute to this cheat sheet! Fork the repo, make changes, and submit a pull request. 133 | 134 | ## 📄 License 135 | This project is licensed under the MIT License. 136 | -------------------------------------------------------------------------------- /tools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 and CSS cheat sheet 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 75 | 76 | 99 | 100 | 101 |
102 |

Tools

103 |
104 |

Transforms

105 |
106 |

Matrix transforms

107 |
108 |
109 | ( 110 | 111 | ) x ( 112 | ) = ( 113 | 114 | ) 115 |
116 | 117 |
118 | ( 119 | ) x ( 120 | ) = ( 121 | 122 | ) 123 |
124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color-active: red; 3 | --bg-color-box: #aaa; 4 | --bg-color-header: cornflowerblue; 5 | --bg-color-highlight: #bbb; 6 | --bg-color-hover: green; 7 | --bg-color-light: white; 8 | --bg-color-link: yellow; 9 | --bg-color-nav: hsla(0, 0%, 30%, 1); 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 gray; 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 | -------------------------------------------------------------------------------- /animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animation and Transitions 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 38 |
39 |

Animation and Transitions

40 |
41 |

Transition template

42 |
43 |

Transition all properties

44 |
45 | .element { 46 | transition: 1s all; 47 | 48 | /* Add other properties such as transform, margin, etc. */ 49 | } 50 |
51 |
52 |
53 |
54 |

Transitions

55 |

Different states may be defined using pseudo-classes like 56 | :hover or 57 | :active or dynamically set using JavaScript.

58 |
59 |

transition-duration:

60 |
61 |
62 |
63 |
64 | 0.7s; 65 |
66 |
67 |
68 |
69 |
70 | 1s; 71 |
72 |
73 |
74 |
75 |
76 | 2s; 77 |
78 |
79 |
80 |
81 |
82 | 3s; 83 |
84 |
85 |
86 |

transition-timing-function:

87 |
88 |
89 |
90 |
91 |
92 | linear; 93 |
94 |
95 |
96 |
97 |
98 | ease; 99 |
100 |
101 |
102 |
103 |
104 | ease-in; 105 |
106 |
107 |
108 |
109 |
110 | ease-out; 111 |
112 |
113 |
114 |
115 |
116 | ease-in-out; 117 |
118 |
119 |
120 |
121 |
122 | steps(4); 123 |
124 |
125 |
126 |
127 |
128 | steps(10); 129 |
130 |
131 |
132 |
133 |
134 | step-start; 135 |
136 |
137 |
138 |
139 |
140 | step-end; 141 |
142 |
143 |
144 |
145 |

transition-delay:

146 |
147 |
148 |
149 |
150 | 0s; 151 |
152 |
153 |
154 |
155 |
156 | 0.3s; 157 |
158 |
159 |
160 |
161 |
162 | 0.7s; 163 |
164 |
165 |
166 |
167 |
168 | 1.5s; 169 |
170 |
171 |
172 |

transition-property:

173 |

Transition a specific property (other properties jump to final state).

174 |
175 |
176 |
A
177 |
178 | all; 179 |
180 |
181 |
182 |
A
183 |
184 | color; 185 |
186 |
187 |
188 |
A
189 |
190 | margin; 191 |
192 |
193 |
194 |
A
195 |
196 | background; 197 |
198 |
199 |
200 |
201 |

Transition examples

202 |
203 |

Card

204 |
205 |
206 |
207 |
A
208 |
B
209 |
210 |
211 |
212 | HTML 213 | <div class="ex-card"> 214 | <div class="card"> 215 | <div class="card-front">A</div> 216 | <div class="card-back">B</div> 217 | </div> 218 | </div> 219 |
220 |
221 | CSS 222 | .ex-card:hover .card { 223 | transform: rotateY(180deg) translateX(100%); 224 | } 225 | 226 | .ex-card { 227 | perspective: 300px; 228 | } 229 | 230 | .card { 231 | transition: 0.7s; 232 | transform-style: preserve-3d; 233 | transform-origin: right; 234 | position: relative; 235 | } 236 | 237 | .card-front, .card-back { 238 | backface-visibility: hidden; 239 | position: absolute; 240 | } 241 | 242 | .card-back { 243 | transform: rotateY(180deg) translateZ(1px); 244 | } 245 |
246 |
247 |
248 |
249 |

Tooltip

250 |
251 |
252 |
253 |

This is a tooltip message.

254 |
255 |
256 | HTML 257 | <div class="ex-tooltip"> 258 | <div class="box biggest"></div> 259 | <p class="tooltip">This is a tooltip message.</p> 260 | </div> 261 |
262 |
263 | CSS 264 | .tooltip { 265 | background-color: transparent; 266 | border-radius: 8px; 267 | color: transparent; 268 | font-size: 0.7em; 269 | position: absolute; 270 | transition: 0.5s; 271 | padding: 0.5em 1em; 272 | margin-top: 0; 273 | z-index: 1000; 274 | } 275 | 276 | .ex-tooltip:hover > .tooltip { 277 | background-color: yellow; 278 | color: black; 279 | font-size: 1.2em; 280 | } 281 |
282 |
283 |
284 |
285 |

Translation

286 |
287 |
288 |
289 |
290 |
291 | CSS 292 | .container .box { 293 | transition: 1s all; 294 | } 295 | 296 | .container:hover .box { 297 | transform: translateX(200px); 298 | } 299 |
300 |
301 |
302 |
303 |

Translation

304 | 305 |
306 |
307 |
308 |

CSS animation

309 |

See 310 | MDN on CSS animations. Also check out 311 | GreenSock.

312 |
313 |

animation-duration:

314 |
315 |
316 |
317 |
318 | 0.7s; 319 |
320 |
321 |
322 |
323 |
324 | 1s; 325 |
326 |
327 |
328 |
329 |
330 | 2s; 331 |
332 |
333 |
334 |
335 |
336 | 3s; 337 |
338 |
339 |
340 |

animation-direction:

341 |
342 |
343 |
344 |
345 | normal; 346 |
347 |
348 |
349 |
350 |
351 | alternate; 352 |
353 |
354 |
355 |
356 |
357 | reverse; 358 |
359 |
360 |
361 |
362 |
363 | alternate-reverse; 364 |
365 |
366 |
367 |

animation-iteration-count:

368 |
369 |
370 |
371 |
372 | 1; 373 |
374 |
375 |
376 |
377 |
378 | 2; 379 |
380 |
381 |
382 |
383 |
384 | infinite; 385 |
386 |
387 |
388 |

animation-timing-function:

389 |
390 |
391 |
392 |
393 |
394 | linear; 395 |
396 |
397 |
398 |
399 |
400 | ease; 401 |
402 |
403 |
404 |
405 |
406 | ease-in; 407 |
408 |
409 |
410 |
411 |
412 | ease-out; 413 |
414 |
415 |
416 |
417 |
418 | ease-in-out; 419 |
420 |
421 |
422 |
423 |
424 | steps(4); 425 |
426 |
427 |
428 |
429 |
430 | steps(10); 431 |
432 |
433 |
434 |
435 |
436 | step-start; 437 |
438 |
439 |
440 |
441 |
442 | step-end; 443 |
444 |
445 |
446 |
447 |

animation-fill-mode:

448 |

449 | Initial state 450 | Delay state 1s 451 | Animate 1s 452 | End state 453 |

454 |
455 |
456 |
A
457 |
458 | none; 459 |
460 |
461 |
462 |
A
463 |
464 | forwards; 465 |
466 |
467 |
468 |
A
469 |
470 | backwards; 471 |
472 |
473 |
474 |
A
475 |
476 | both; 477 |
478 |
479 |
480 | 481 | 482 |
483 |

Animation Keyframes

484 |
485 |

Slide right

486 |
487 |
488 |
489 |
490 | @keyframes slideright { 491 | from { 492 | margin-left: 0%; 493 | } 494 | to { 495 | margin-left: 80%; 496 | } 497 | } 498 |
499 |
500 |
501 |

Set background color

502 |
503 |
504 |
505 |
506 | @keyframes showbackground { 507 | from { 508 | background-color: blue; 509 | } 510 | to { 511 | background-color: red; 512 | } 513 | } 514 |
515 |
516 |
517 |

Grow size

518 |
519 |
520 |
521 |
522 | @keyframes growsize { 523 | from { 524 | height: 1em; 525 | width: 1em; 526 | } 527 | to { 528 | height: 4em; 529 | width: 4em; 530 | } 531 | } 532 |
533 |
534 |
535 |

Cursor

536 |
537 |
538 |
539 |
540 | @keyframes cursor { 541 | 50% { 542 | border-color: transparent; 543 | } 544 | } 545 |
546 |
547 |
548 | 549 |
550 |

Using animate.css

551 |
552 |

Attention

553 |
554 |
555 |
556 |

bounce

557 |
558 | class="animated bounce" 559 |
560 |
561 |
562 |

flash

563 |
564 | class="animated flash" 565 |
566 |
567 |
568 |

pulse

569 |
570 | class="animated pulse" 571 |
572 |
573 |
574 |

rubberBand

575 |
576 | class="animated rubberBand" 577 |
578 |
579 |
580 |

shake

581 |
582 | class="animated shake" 583 |
584 |
585 |
586 |

headShake

587 |
588 | class="animated headShake" 589 |
590 |
591 |
592 |

swing

593 |
594 | class="animated swing" 595 |
596 |
597 |
598 |

tada

599 |
600 | class="animated tada" 601 |
602 |
603 |
604 |

wobble

605 |
606 | class="animated wobble" 607 |
608 |
609 |
610 |

jello

611 |
612 | class="animated jello" 613 |
614 |
615 |
616 |
617 |

Bouncing entrances

618 |
619 |
620 |

bounceIn

621 |
622 | class="animated bounceIn" 623 |
624 |
625 |
626 |

bounceInDown

627 |
628 | class="animated bounceInDown" 629 |
630 |
631 |
632 |

bounceInLeft

633 |
634 | class="animated bounceInLeft" 635 |
636 |
637 |
638 |

bounceInRight

639 |
640 | class="animated bounceInRight" 641 |
642 |
643 |
644 |

bounceInUp

645 |
646 | class="animated bounceInUp" 647 |
648 |
649 |
650 |

Bouncing exits

651 |
652 |
653 |

bounceOut

654 |
655 | class="animated bounceOut" 656 |
657 |
658 |
659 |

bounceOutDown

660 |
661 | class="animated bounceOutDown" 662 |
663 |
664 |
665 |

bounceOutLeft

666 |
667 | class="animated bounceOutLeft" 668 |
669 |
670 |
671 |

bounceOutRight

672 |
673 | class="animated bounceOutRight" 674 |
675 |
676 |
677 |

bounceOutUp

678 |
679 | class="animated bounceOutUp" 680 |
681 |
682 |
683 |

Fading entrances

684 |
685 |
686 |
687 |

fadeIn

688 |
689 | class="animated fadeIn" 690 |
691 |
692 |
693 |

fadeInDown

694 |
695 | class="animated fadeInDown" 696 |
697 |
698 |
699 |

fadeInDownBig

700 |
701 | class="animated fadeInDownBig" 702 |
703 |
704 |
705 |

fadeInLeft

706 |
707 | class="animated fadeInLeft" 708 |
709 |
710 |
711 |

fadeInLeftBig

712 |
713 | class="animated fadeInLeftBig" 714 |
715 |
716 |
717 |

fadeInRight

718 |
719 | class="animated fadeInRight" 720 |
721 |
722 |
723 |

fadeInRightBig

724 |
725 | class="animated fadeInRightBig" 726 |
727 |
728 |
729 |

fadeInUp

730 |
731 | class="animated fadeInUp" 732 |
733 |
734 |
735 |

fadeInUpBig

736 |
737 | class="animated fadeInUpBig" 738 |
739 |
740 |
741 |
742 |

Fading exits

743 |
744 |
745 |
746 |

fadeOut

747 |
748 | class="animated fadeOut" 749 |
750 |
751 |
752 |

fadeOutDown

753 |
754 | class="animated fadeOutDown" 755 |
756 |
757 |
758 |

fadeOutDownBig

759 |
760 | class="animated fadeOutDownBig" 761 |
762 |
763 |
764 |

fadeOutLeft

765 |
766 | class="animated fadeOutLeft" 767 |
768 |
769 |
770 |

fadeOutLeftBig

771 |
772 | class="animated fadeOutLeftBig" 773 |
774 |
775 |
776 |

fadeOutRight

777 |
778 | class="animated fadeOutRight" 779 |
780 |
781 |
782 |

fadeOutRightBig

783 |
784 | class="animated fadeOutRightBig" 785 |
786 |
787 |
788 |

fadeOutUp

789 |
790 | class="animated fadeOutUp" 791 |
792 |
793 |
794 |

fadeOutUpBig

795 |
796 | class="animated fadeOutUpBig" 797 |
798 |
799 |
800 |
801 |

Flips

802 |
803 |
804 |

flipInX

805 |
806 | class="animated flipInX" 807 |
808 |
809 |
810 |

flipInY

811 |
812 | class="animated flipInY" 813 |
814 |
815 |
816 |

flipOutX

817 |
818 | class="animated flipOutX" 819 |
820 |
821 |
822 |

flipOutY

823 |
824 | class="animated flipOutY" 825 |
826 |
827 |
828 |

Lightspeed

829 |
830 |
831 |

lightSpeedIn

832 |
833 | class="animated lightSpeedIn" 834 |
835 |
836 |
837 |

lightSpeedOut

838 |
839 | class="animated lightSpeedOut" 840 |
841 |
842 |
843 |

Rotating entrances

844 |
845 |
846 |

rotateIn

847 |
848 | class="animated rotateIn" 849 |
850 |
851 |
852 |

rotateInDownLeft

853 |
854 | class="animated rotateInDownLeft" 855 |
856 |
857 |
858 |

rotateInDownRight

859 |
860 | class="animated rotateInDownRight" 861 |
862 |
863 |
864 |

rotateInUpLeft

865 |
866 | class="animated rotateInUpLeft" 867 |
868 |
869 |
870 |

rotateInUpRight

871 |
872 | class="animated rotateInUpRight" 873 |
874 |
875 |
876 |

Rotating exits

877 |
878 |
879 |

rotateOut

880 |
881 | class="animated rotateOut" 882 |
883 |
884 |
885 |

rotateOutDownLeft

886 |
887 | class="animated rotateOutDownLeft" 888 |
889 |
890 |
891 |

rotateOutDownRight

892 |
893 | class="animated rotateOutDownRight" 894 |
895 |
896 |
897 |

rotateOutUpLeft

898 |
899 | class="animated rotateOutUpLeft" 900 |
901 |
902 |
903 |

rotateOutUpRight

904 |
905 | class="animated rotateOutUpRight" 906 |
907 |
908 |
909 |

Zoom entrances

910 |
911 |
912 |

zoomIn

913 |
914 | class="animated zoomIn" 915 |
916 |
917 |
918 |

zoomInDown

919 |
920 | class="animated zoomInDown" 921 |
922 |
923 |
924 |

zoomInLeft

925 |
926 | class="animated zoomInLeft" 927 |
928 |
929 |
930 |

zoomInRight

931 |
932 | class="animated zoomInRight" 933 |
934 |
935 |
936 |

zoomInUp

937 |
938 | class="animated zoomInUp" 939 |
940 |
941 |
942 |

Zoom exits

943 |
944 |
945 |

zoomOut

946 |
947 | class="animated zoomOut" 948 |
949 |
950 |
951 |

zoomOutDown

952 |
953 | class="animated zoomOutDown" 954 |
955 |
956 |
957 |

zoomOutLeft

958 |
959 | class="animated zoomOutLeft" 960 |
961 |
962 |
963 |

zoomOutRight

964 |
965 | class="animated zoomOutRight" 966 |
967 |
968 |
969 |

zoomOutUp

970 |
971 | class="animated zoomOutUp" 972 |
973 |
974 |
975 |

Slide entrances

976 |
977 |
978 |

slideInDown

979 |
980 | class="animated slideInDown" 981 |
982 |
983 |
984 |

slideInLeft

985 |
986 | class="animated slideInLeft" 987 |
988 |
989 |
990 |

slideInRight

991 |
992 | class="animated slideInRight" 993 |
994 |
995 |
996 |

slideInUp

997 |
998 | class="animated slideInUp" 999 |
1000 |
1001 |
1002 |

Slide exits

1003 |
1004 |
1005 |

slideOutDown

1006 |
1007 | class="animated slideOutDown" 1008 |
1009 |
1010 |
1011 |

slideOutLeft

1012 |
1013 | class="animated slideOutLeft" 1014 |
1015 |
1016 |
1017 |

slideOutRight

1018 |
1019 | class="animated slideOutRight" 1020 |
1021 |
1022 |
1023 |

slideOutUp

1024 |
1025 | class="animated slideOutUp" 1026 |
1027 |
1028 |
1029 |

Specials

1030 |
1031 |
1032 |

hinge

1033 |
1034 | class="animated hinge" 1035 |
1036 |
1037 |
1038 |

jackInTheBox

1039 |
1040 | class="animated jackInTheBox" 1041 |
1042 |
1043 |
1044 |

rollIn

1045 |
1046 | class="animated rollIn" 1047 |
1048 |
1049 |
1050 |

rollOut

1051 |
1052 | class="animated rollOut" 1053 |
1054 |
1055 |
1056 |
1057 | 1058 | 1059 | --------------------------------------------------------------------------------