Radio Buttons With Animations
This is an example of a web form with radio buttons with hopping animations, designed using HTML, CSS, and Bootstrap framework 4. Media queries have been used to increase the responsiveness of the form. The body of the form is given a style set of background as #f1f1f1, color as #171717, display as flex, font as 1em Ubuntu, sans-serif, height as 100vh, line-height as 1.5, and padding as 1.5em 0. The animation timing, duration, and colors are predefined as $wormDur: 0.4s, $radioDur: 0.2s, $timing1: cubic-bezier(0.45,0.05,0.55,0.95), $timing2: cubic-bezier(0.5,0,0.5,2), and $shadowColor: rgba(0,0,0,0.2). The label of the radio button has the styles of $shadowColor as rgba(0,0,0,0.2), cursor as pointer to get the hand cursor effect, font-weight as bold, text-shadow as 0 0.1em 0.1em $shadowColor, transition as color $radioDur $timing1, and margin-bottom as 1.5em. Once checked, the radio button and the labels take the color #2762f3.