Best CSS Animation Examples

Pure CSS Submarine Animation

[{"selector":"#anim-50e15dba-22db-4e75-ad6c-622bc7fe9c7d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

Water drop loader CSS Animation

[{"selector":"#anim-d420ac99-d913-48b4-b16e-d7b630fcccee [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.254406466746005%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-109197d5-667a-4340-a6a0-37d6c321ff3d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-67d2ed3f-b443-4660-ad66-35eb655a5b5b","keyframes":{"transform":["translate3d(113.79312%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Awesome Jumping Text Animation

[{"selector":"#anim-907f6a40-4782-41d6-a425-9584c0cc04f8 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-9972d7d4-e4f9-4521-9764-32c1fe3cc927","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-24a5d7db-6556-4e01-9f15-fc817cd67380","keyframes":{"transform":["translate3d(-115.04703%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

CSS Wave Text Animation

[{"selector":"#anim-a202c686-254c-4b0e-a730-bf46a08dd5c3 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(0%, 0, 0) translate(25%, -0.00013289979928998719%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-e33d96c2-2b71-41de-a6c1-d92b312e7372","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-95a8014a-983c-4f77-ab4a-1569544e902f","keyframes":{"transform":["translate3d(-115.04703%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Learn more

Pure CSS Submarine Animation

#1

Water drop loader CSS Animation

#2

Awesome Jumping Text Animation

#3

CSS Wave Text Animation

#4