Best CSS Animation Examples

Pure CSS Submarine Animation

[{"selector":"#anim-3a5de292-08c2-42ae-a62a-ad807eba0f51 [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-3efa5d12-914d-4684-af14-d908fc60c735 [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-e5126686-f153-436f-bc47-21bcdc12664e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc274aa3-ba97-48ff-ad2c-500f5919998b","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-c4078d3a-9e79-4350-8086-00dc6b48a4b7 [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-1ec11cfa-854d-4b99-a192-39773fb30e8f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-db89b9c8-4a5b-4c6c-b742-adb8f0befa36","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"}]

CSS Wave Text Animation

[{"selector":"#anim-e9df61a0-d5b1-4b59-9128-edd7ed662b18 [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-95497a7f-68cc-435e-bd55-ae4b8806d08f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7358992e-8e91-4760-9636-3feb798d3654","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"}] CSS Animation

Pure CSS Submarine Animation

#1

Water drop loader CSS Animation

#2

Awesome Jumping Text Animation

#3

CSS Wave Text Animation

#4