September 24, 2016
CSS Flip Box Loading Animation
Hi friends, we did GIF images to create animations for may times. However, they aren’t much to be used over gradients or pictures (no alpha channel, no anti-aliasing) of which new websites are full. There are various workarounds to animate PNG images rather, But I want to show you a solution I discovered to create a “loading animation” from scratch using CSS, without images.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Loading_model_9</title> <style> body{ background-color:#7d1ad4; } .sa-folding-box{ margin: 300px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform:rotateZ(45deg); } .sa-folding-box .sa-box{ float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sa-folding-box .sa-box:before{ content: ''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFF; -webkit-animation: sa-foldboxAngle 2.4s infinite linear both; animation: sa-foldboxAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sa-folding-box .sa-box_2{ -webkit-transform:scale(1.1) rotateZ(90deg); transform:scale(1.1) rotateZ(90deg); } .sa-folding-box .sa-box_3{ -webkit-transform:scale(1.1) rotateZ(180deg); transform:scale(1.1) rotateZ(180deg); } .sa-folding-box .sa-box_4{ -webkit-transform:scale(1.1) rotateZ(270deg); transform:scale(1.1) rotateZ(270deg); } .sa-folding-box .sa-box_2:before{ -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sa-folding-box .sa-box_3:before{ -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sa-folding-box .sa-box_4:before{ -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @keyframes sa-foldboxAngle{ 0%, 10%{ -webkit-transform: perspective(140px) rotateX(-180deg); transform:perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75%{ -webkit-transform: perspective(140px) rotateX(0deg); transform:perspective(140px) rotateX(0deg); opacity:1; } 90%, 100%{ -webkit-transform:perspective(140px) rotateY(180deg); transform:perspective(140px) rotateY(180deg); opacity: 0; } } @-webkit-keyframes sa-foldboxAngle{ 0%, 10%{ -webkit-transform: perspective(140px) rotateX(-180deg); transform:perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75%{ -webkit-transform: perspective(140px) rotateX(0deg); transform:perspective(140px) rotateX(0deg); opacity:1; } 90%, 100%{ -webkit-transform:perspective(140px) rotateY(180deg); transform:perspective(140px) rotateY(180deg); opacity: 0; } } </style> </head> <body> <div class="sa-folding-box"> <div class="sa-box_1 sa-box"></div> <div class="sa-box_2 sa-box"></div> <div class="sa-box_4 sa-box"></div> <div class="sa-box_3 sa-box"></div> </div> </body> </html> |
Download
