Animated Nerf Gun Radio Button

[{"selector":"#anim-cd339c84-0ce3-4b19-8c8b-b3d06a6ba78a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eae651ed-f675-4b1c-adea-d25f0fcfc2ed","keyframes":{"transform":["translate3d(0px, 108.58586%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Card Input Radio switcher

[{"selector":"#anim-4ba525b6-eb3e-46dd-9d61-24ba4685696b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93879a6c-7360-4a11-8de3-47d396a4100a","keyframes":{"transform":["translate3d(0px, 107.21537%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Checkbox and radios (dark/light)

[{"selector":"#anim-1c043c04-513d-4947-9262-c54813ba2d3c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5d11b640-a782-4481-895f-1f7fbec2c5f2","keyframes":{"transform":["translate3d(0px, 86.42677%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Custom Radio Switch Button

[{"selector":"#anim-d278ead5-6a8a-4a65-b4a6-e947ed4e1af4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-746e6750-ad6e-48e1-94c5-4dab5f4500a3","keyframes":{"transform":["translate3d(0px, 108.58586%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Pill Styled Radio Buttons

[{"selector":"#anim-e792de37-817c-40aa-897c-cc99297cf734","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7948424d-d5c8-43e0-9bf3-b692b5bc2684","keyframes":{"transform":["translate3d(0px, 111.23503%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Awesome Custom Radio button

[{"selector":"#anim-68bdd6be-5b84-4fb1-b5e2-a9771c542be2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-668e5ad5-1dd8-49f9-8eb1-981e9bd2bc2b","keyframes":{"transform":["translate3d(0px, 108.30176%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Radios Under the Hood

[{"selector":"#anim-67778a8f-3f12-4f6a-9edc-d0ba47d51716","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e91e5f0c-131f-40f7-94ae-2b73370135b9","keyframes":{"transform":["translate3d(0px, 112.72202%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Google Maps Radio Button

[{"selector":"#anim-0fc1691d-35b0-4015-8e63-effbe5747971","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c75152e8-bb13-43c7-bf09-1aa7724a34b8","keyframes":{"transform":["translate3d(0px, 110.29040%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Animated SVG Radio Buttons

[{"selector":"#anim-a1b49dae-3e3b-46b7-8e22-2eaaef6b0725","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-06ec2cc2-4b51-4a42-af74-eb80450317d6","keyframes":{"transform":["translate3d(0px, 111.23503%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Custom Input Radio Button

[{"selector":"#anim-0caba843-9c90-4224-ad32-fc7f6b35d78f","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] Learn more