100% Free Best CSS Card Design

[{"selector":"#anim-1dfc44ed-8f26-4f05-8a79-9f5160c3a2fd","keyframes":[{"offset":0,"transform":"translate3d(0, -194.44445%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -54.67777934%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -18.58888942%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -6.980555755%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -3.0333334199999995%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] [{"selector":"#anim-a033e6dd-87c4-47af-8627-129be4b537c4 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(28.91654452799613%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-43ac2a8f-a8a3-4508-8b32-01088d81e988","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9cde57a-92d5-4b2e-9fad-3b7dd2b6d712","keyframes":{"transform":["translate3d(0px, 109.15404%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Codepen Cards layout design

[{"selector":"#anim-923bd42b-daea-4abc-b257-520d041da812 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-e2a506e9-e7c9-46e7-9dac-e3e07f750519","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93183a07-5d4e-4785-85f7-8f13c20c63d5","keyframes":{"transform":["translate3d(-115.3605%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] #1

CSS Card Hover Effect

[{"selector":"#anim-427d3254-d179-4d14-90b7-605bc7cd624e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(30.312499880537015%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-ef8d3409-46b7-4399-86bd-a9bfded31ff6","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] #2

Blog Posts Card Layout

[{"selector":"#anim-e14958c3-5f87-4982-a0a2-4cb8f4f8348d [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(30.312499880537015%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-9f0794f2-9e48-49fb-b341-a1788b4e0d3b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0123bbab-fe77-4dfc-9d20-98900b009c0a","keyframes":{"transform":["translate3d(0px, 115.69598%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] #3

Awesome product card design

[{"selector":"#anim-872b90a1-ffb2-4c19-ba49-9d2f6d517380 [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,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-c953b01d-1f47-4056-a941-7f8bd8d2e01b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5420ec48-5f3a-4534-88a8-5b3caca16bdb","keyframes":{"transform":["translate3d(113.47963%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] #4

Fruits product CSS card design

[{"selector":"#anim-cfe2db3a-2ab3-47d6-b1c7-5db450f70b11 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.8176489567817145%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-00d17cd0-72dd-4c68-b5c1-a873533f3593","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8201441e-8b50-486c-9647-5070b2eff4b7","keyframes":{"transform":["translate3d(113.47963%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] #5

Gaming profile card design

[{"selector":"#anim-05275afa-4f78-4fe2-b6a8-c6b93636964b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(28.631591667212327%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.14,.34,.47,.9)","fill":"forwards"}] [{"selector":"#anim-2c283e58-014c-4165-ab7e-8ee4b916b828","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-bbbde878-6f1c-40fd-984e-bf4a1de7af81","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] #6 Learn more