I am here in this post with a beautiful custom checkbox with keyframes animation. As we knows today website are highly customized with advance CSS weather with the help of pseudo elements or some advance CSS properties and attributes like keyframes, transition and transform properties. These properties as highly supportive to cross-browser.
Here you will get how to use keyframes and how to use transition and transform CSS3 properties to get best effect that will enhance the beauty of your website and web application. As we know default checkbox and radio buttons are very old fashion in design in compare to latest trend as going. So customization of these default radio and checkbox input types with beauty without losing its light weight working and function with cross browser usability is a challenging task.
Don’t worry stay update with us get the best custom checkbox with 100% working cross-browser working keep in mind.
Lets take a quick look what I am covering in this Pure CSS custom checkboxes :
- keyframes
- transform
- animation
- transition
As you can see in above we are covering css3 properties in this custom checkbox animation.
Let’s code this Animated checkbox using CSS3 Properties:
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 | <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Checkmark Animation, Custom Chechbox Animation</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="center"> <label class="label"> <input class="label__checkbox_animation" type="checkbox" /> <span class="label__text_animation"> <span class="label__check_animation"> <i class="fa fa-check icon"></i> </span> </span> </label> </div> </body> </html> |
CSS Code :
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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | body, html { font-family: 'Lato', monospace; font-size: calc(1rem + 1vw); } body{ background: url("https://www.domfamilydentistry.com/wp-content/uploads/2015/11/bigstock-Abstract-defocused-blurred-bac-103020161.jpg"); background-repeat: no-repeat; background-position: top left; background-size: 100%; } .label__checkbox_animation { display: none; } .label__check_animation { display: inline-block; border-radius: 50%; border: 5px solid rgba(0, 0, 0, 0.1); background: white; vertical-align: middle; margin-right: 20px; width: 6em; height: 6em; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: border .3s ease; transition: border .3s ease; } .label__check_animation i.icon { opacity: 0.2; font-size: 129px; color: transparent; -webkit-transition: opacity .3s .1s ease; transition: opacity .5s .3s ease; -webkit-text-stroke: 3px rgba(0, 0, 0, 0.5); } .label__check_animation:hover { border: 5px solid rgba(0, 0, 0, 0.2); } .label__checkbox_animation:checked + .label__text_animation .label__check_animation { -webkit-animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards; animation: check 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22) 1 forwards; } .label__checkbox_animation:checked + .label__text_animation .label__check_animation .icon { opacity: 1; -webkit-transform: scale(0); transform: scale(0); color: white; -webkit-text-stroke: 0; -webkit-animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards; animation: icon 0.3s cubic-bezier(1, 0.008, 0.565, 1.65) 0.1s 1 forwards; } .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes icon { from { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes icon { from { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes check { 0% { width: 6.5em; height: 6.5em; border-width: 5px; transition: all 0.5s ease; } 10% { width: 3.5em; height: 3.5em; opacity: 0.1; background: rgba(0, 0, 0, 0.2); border-width: 15px; transition: all 0.5s ease; } 30% { width: 2.5em; height: 2.5em; opacity: 0.4; background: rgba(0, 0, 0, 0.1); border-width: 0; transition: all 0.5s ease; } 50% { width: 4em; height: 4em; background: #00d478; border: 0; opacity: 0.6; transition: all 0.5s ease; } 100% { width: 6em; height: 6em; background: #00d478; border: 0; opacity: 1; transition: all 1s ease; } } @keyframes check { 0% { width: 6.5em; height: 6.5em; border-width: 5px; transition: all 0.5s ease; } 10% { width: 3.5em; height: 3.5em; opacity: 0.1; background: rgba(0, 0, 0, 0.2); border-width: 15px; transition: all 0.5s ease; } 30% { width: 2.5em; height: 2.5em; opacity: 0.4; background: rgba(0, 0, 0, 0.1); border-width: 0; transition: all 0.5s ease; } 50% { width: 4em; height: 4em; background: #00d478; border: 0; opacity: 0.6; transition: all 0.5s ease; } 100% { width: 6em; height: 6em; background: #00d478; border: 0; opacity: 1; transition: all 1s ease; } } |
