├── .gitattributes ├── .gitignore ├── index.html ├── mario-examples ├── img │ ├── cloud.png │ ├── luigi.png │ └── mario.png ├── index.html └── style.css ├── rotate-examples ├── panels.html └── style.css ├── style.css └── web-examples ├── basket.html ├── img ├── basket.jpg ├── basket.png ├── ninja.png ├── t-1.jpg ├── t-2.jpg └── t-3.jpg ├── pop-up.html └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Basket Example 4 | 5 | 6 | 7 |

8 | 9 |

10 | -------------------------------------------------------------------------------- /mario-examples/img/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/mario-examples/img/cloud.png -------------------------------------------------------------------------------- /mario-examples/img/luigi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/mario-examples/img/luigi.png -------------------------------------------------------------------------------- /mario-examples/img/mario.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/mario-examples/img/mario.png -------------------------------------------------------------------------------- /mario-examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Mario Kart Animations 4 | 5 | 6 | 7 |

8 |

9 |

10 |

11 |

12 | -------------------------------------------------------------------------------- /mario-examples/style.css: -------------------------------------------------------------------------------- 1 | /*// BASE STYLES //*/ 2 | 3 | html, body{ 4 | height: 100%; 5 | width:100%; 6 | overflow: hidden; 7 | margin: 0; 8 | } 9 | 10 | .grass, .sky, .road{ 11 | position: relative; 12 | } 13 | 14 | .sky{ 15 | height: 40%; 16 | background: skyblue; 17 | } 18 | 19 | .grass{ 20 | height: 30%; 21 | background: seagreen; 22 | } 23 | 24 | .road{ 25 | height: 30%; 26 | background: dimgrey; 27 | box-sizing: border-box; 28 | border-top: 10px solid grey; 29 | border-bottom: 10px solid grey; 30 | width: 100%; 31 | } 32 | 33 | .lines{ 34 | box-sizing: border-box; 35 | border: 5px dashed #fff; 36 | height: 0px; 37 | width: 100%; 38 | position: absolute; 39 | top: 45%; 40 | } 41 | 42 | /*// ELEMENTS TO ANIMATE //*/ 43 | 44 | 45 | 46 | /*// KEYFRAMES //*/ 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /rotate-examples/panels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Basket Example 4 | 5 | 6 | 7 |

8 |

Pick a Card

9 |

11 |
Hello
12 |
World
13 |
15 |
Get to
16 |
The chopper
17 |
19 |
foo
20 |
bar
21 |
23 |
tempus
24 |
fugit
25 |
27 |
html
28 |
rocks
29 |
31 |
A
32 |
B
33 |
35 |
Super
36 |
Mariokart
37 |
39 |
j
40 |
Query
41 |

43 |

44 | 45 | -------------------------------------------------------------------------------- /rotate-examples/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #333; 3 | font-family: verdana; 4 | } 5 | 6 | .wrapper{ 7 | width: 100%; 8 | max-width: 1200px; 9 | margin: 40px auto; 10 | } 11 | 12 | h1{ 13 | color: #fff; 14 | font-weight: normal; 15 | text-align: center; 16 | font-size: 48px; 17 | } 18 | 19 | .panels{ 20 | list-style-type: none; 21 | padding: 0; 22 | } 23 | 24 | .panels li{ 25 | position: relative; 26 | width: 25%; 27 | margin: 0; 28 | display: block; 29 | box-sizing: border-box; 30 | float: left 31 | } 32 | 33 | .panels li div{ 34 | width: 100%; 35 | padding: 50% 0; 36 | text-align: center; 37 | color: #fff; 38 | font-size: 20px; 39 | text-transform: uppercase; 40 | letter-spacing: 2px; 41 | line-height: 0; 42 | cursor: pointer; 43 | } 44 | 45 | /*// ANIMATION STYLES //*/ 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | width: 100%; 3 | padding: 20px; 4 | box-sizing: border-box; 5 | } -------------------------------------------------------------------------------- /web-examples/basket.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Basket Example 4 | 5 | 6 | 7 | 8 |

9 |

Sports Clothing

10 |

11 |

12 |

14 | 15 |
Green T-Shirt
16 | 17 |
19 | 20 |
Yellow T-Shirt
21 | 22 |
24 | 25 |
Pink T-Shirt
26 | 27 |
29 | 30 |
Green T-Shirt
31 | 32 |
34 | 35 |
Yellow T-Shirt
36 | 37 |
39 | 40 |
Pink T-Shirt
41 | 42 |

44 | 47 | -------------------------------------------------------------------------------- /web-examples/img/basket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/basket.jpg -------------------------------------------------------------------------------- /web-examples/img/basket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/basket.png -------------------------------------------------------------------------------- /web-examples/img/ninja.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/ninja.png -------------------------------------------------------------------------------- /web-examples/img/t-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/t-1.jpg -------------------------------------------------------------------------------- /web-examples/img/t-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/t-2.jpg -------------------------------------------------------------------------------- /web-examples/img/t-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/css-animations-playlist/67d35bcb79b07ed4fc99cbfd63d0f0aa2a1286bd/web-examples/img/t-3.jpg -------------------------------------------------------------------------------- /web-examples/pop-up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pop-up Example 4 | 5 | 6 | 7 |

8 |

9 |

10 |

Kung Foo Your Skills

11 |

Join the mailing list to be spammed with useless ninja tips

12 | 13 | 14 |

15 |

16 |

17 | -------------------------------------------------------------------------------- /web-examples/style.css: -------------------------------------------------------------------------------- 1 | /*// POP-UP BASE STYLES //*/ 2 | 3 | body{margin: 0; position: relative;} 4 | body.pop-up{background: #222;} 5 | *{ 6 | font-family: Calibri, sans-serif; 7 | font-weight: normal; 8 | color: #333; 9 | } 10 | h1{ 11 | font-size: 48px; 12 | margin: 10px 0; 13 | } 14 | p{ 15 | margin-bottom: 40px; 16 | } 17 | #pop-up{ 18 | position: relative; 19 | top: 200px; 20 | width: 500px; 21 | margin: 0 auto; 22 | text-align: center; 23 | } 24 | #pop-up .container{ 25 | background: #f0e4d4; 26 | padding: 30px; 27 | position: absolute; 28 | top: 50px; 29 | width: 100%; 30 | box-sizing: border-box; 31 | } 32 | #pop-up input{ 33 | padding: 10px; 34 | border: 0; 35 | border-radius: 10px 0 0 10px; 36 | border: 1px solid #333; 37 | font-size: 18px; 38 | } 39 | button{ 40 | padding: 10px; 41 | border: 0; 42 | color: #fff; 43 | background: #333; 44 | margin-left: -5px; 45 | margin-left: -5px; 46 | border-radius: 0 10px 10px 0; 47 | border: 1px solid #333; 48 | font-size: 18px; 49 | } 50 | .cross{ 51 | position: absolute; 52 | top: 10px; 53 | left: 10px; 54 | background: #555; 55 | color: #ddd; 56 | font-weight: bold; 57 | width: 22px; 58 | height: 22px; 59 | text-align: center; 60 | border-radius: 11px; 61 | } 62 | 63 | /*// POP-UP ANIMATION STYLES //*/ 64 | 65 | 66 | /*// BASKET BASE STYLES //*/ 67 | 68 | header{ 69 | padding: 10px 20px; 70 | border-bottom: 1px solid #eee; 71 | background: #fff; 72 | } 73 | header:after{ 74 | display: block; 75 | content: ""; 76 | clear: both; 77 | } 78 | .basket ul{ 79 | padding: 0; 80 | margin-top: 40px; 81 | } 82 | .basket li{ 83 | display: inline-block; 84 | list-style-type: none; 85 | width: 30%; 86 | margin: 30px 1.5%; 87 | text-align: center; 88 | } 89 | .basket button{ 90 | border-radius: 10px; 91 | cursor: pointer; 92 | } 93 | .basket header div{ 94 | float: right; 95 | position: relative; 96 | z-index: 1; 97 | } 98 | .basket header h1{ 99 | float: left; 100 | } 101 | 102 | /*// BASKET ANIMATION STYLES //*/ 103 | 104 | 105 | 106 | --------------------------------------------------------------------------------

Pick a Card

Green T-Shirt

Yellow T-Shirt

Pink T-Shirt

Green T-Shirt

Yellow T-Shirt

Pink T-Shirt

Kung Foo Your Skills