PURE HTML CSS SPEECH BUBBLE

[{"selector":"#anim-bb7a3251-1d1d-4bcc-9fb9-1a8d0ac51787","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-974118bc-4118-4514-845e-9dcc596e1eac","keyframes":{"transform":["translate3d(0px, -1286.72896%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-32aca6d6-7be9-4bfc-a751-dc11700ac04a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc407515-ad18-4407-addc-6dd20eaa08a5","keyframes":{"transform":["translate3d(0px, 137.35829%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b30b9a20-c7d4-4ff8-b772-59b1911a2683","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b49d29e2-ec66-429b-b83d-8bee4d573ddc","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (a quick guide)

SIMPLE TEXT BOX HTML

[{"selector":"#anim-d203f3e5-9b71-4b3f-bb05-ab78fe4cba20","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7911f1d0-ad5a-4450-b7de-a1fa24e53c36","keyframes":{"transform":["translate3d(-115.90909%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-15a24ff3-6d4c-4dc9-acd2-88160bd6772b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9355e299-cfd7-4e5a-a987-cb0c0a8ef516","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <div class="speech"> Lorem ipsum dolor sit amet. </div> Lorem ipsum dolor sit amet.

SIMPLE TEXT BOX CSS

[{"selector":"#anim-a3475d11-5249-4772-afca-01bf1fc0b6ed","keyframes":{"transform":["rotate(-540deg) scale(0.1)","none"],"opacity":[0,1]},"delay":0,"duration":1000,"fill":"both","iterations":1}] .speech { FONT font-family: arial, sans-serif; font-size: 1.1em; COLOR color: #fff; background: #a53d38; DIMENSIONS + POSITION position: relative; max-width: 320px; padding: 20px; border-radius: 10px; }

"WITH CALLOUT TAIL" HTML

[{"selector":"#anim-2355872f-06f3-428d-8664-ac21ab38595a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-afd95fe1-b98c-476f-b725-49864e015ff0","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c862d62f-01a2-4a36-80d4-98db2c73dc66","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ccba9efc-247b-4058-85d5-db2fbf991fe6","keyframes":{"transform":["translate3d(117.85715%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Lorem ipsum dolor sit amet. <div class="speech bottom"> Lorem ipsum dolor sit amet. </div>

"WITH CALLOUT TAIL" CSS

[{"selector":"#anim-2cbb3600-c11c-4a9f-b437-a4a8152819e3","keyframes":{"transform":["translate3d(-115.25974%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-26ebb9ea-2837-4ecf-aca1-e5dc2723cd6b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-50ffadff-163a-4b89-a874-1340eb61e205","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-d42bb65b-231c-4517-aead-42c3c0d5f364","keyframes":{"transform":["translate3d(115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd33003f-2bd8-4c3c-917d-2a6f9cdbd7c9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8560313d-7465-45eb-ab4c-e0bad32803f3","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] bottom.speech::after { DOWN TRIANGLE border-top-color: #a53d38; border-bottom: 0; POSITION AT BOTTOM bottom: -20px; left: 50%; margin-left: -20px; } .speech::after { ATTACH TRANSPARENT BORDERS content: ""; border: 20px solid transparent; NECESSARY TO POSITION THE "TAIL" position: absolute; }

VISIT & FOLLOW

[{"selector":"#anim-296cbb67-f47f-43b2-b06f-d2d6b2444918","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-71ea0603-aa27-459c-958e-d2ff17fff647","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c3f6ebd9-b622-4347-8499-642caa61d862","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25ce8d90-3897-42db-89c2-14d0549be5c1","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-509f3e4b-fb96-4a84-a47f-93aa21647098","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bce83c70-10c0-4618-b8b3-43ab94ee946f","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2ebe346e-a512-4e31-bdb7-b7fc49ba043e","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-039d8b58-717f-41a0-bfcd-2c5701c33de8","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a900e854-bd5b-4914-86a1-9f17317dbd58","keyframes":{"transform":["translate3d(-171.47058%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a73e55a1-e5f7-4a78-90d1-81e36cf1f09a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(20.250939014149093%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

PURE HTML CSS SPEECH BUBBLE

SIMPLE TEXT BOX HTML

01

SIMPLE TEXT BOX CSS

02

"WITH CALLOUT TAIL" HTML

03

"WITH CALLOUT TAIL" CSS

04

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL