PURE HTML CSS SPEECH BUBBLE

[{"selector":"#anim-b2fa134f-25e3-4b98-90bb-01bdfc01fba1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-62a62a34-44da-4ae5-a1b2-7ca2a62cb6e1","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-4076a5d1-c4d8-49b3-b744-69492eaa9d5a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c4bd823-279b-4138-ad9e-2a2d1b494610","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-ec4e8166-bea4-4b1f-90a7-8dca72743bc1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-104684b5-9cd5-479d-8db6-4ed81e415fe2","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-f3ca053a-3663-4ae9-9c01-3682eaed93e1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fff1e610-d08e-4274-a344-dce6e4d7e4d8","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-36697731-a95c-4aac-9261-0497616967e8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c096264-9c34-4a0a-8a24-18b52f7587f8","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-a9cd111f-0609-40c7-a3c6-7e8164bd9de2","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-6e413f17-5934-4d11-9b52-011ce04ed933","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-78dfacc4-e616-4649-822a-40c3cd17d393","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-3bbc55ce-b504-49c4-a93e-4ca93110de61","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-252b60d5-bd7f-4bca-8979-6118bbc9d8bf","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-072a06a3-6a16-4bdc-8942-1fc520c6c4ba","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-b420ca3c-95b6-4e20-b3a6-e08cd7149671","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74a97612-c799-4d95-8e14-bb9d4bbc0e1a","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-f6c9f8e9-d117-4607-8079-d65645272488","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-20405375-7b36-498b-ad96-05886a373a3b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-41d1bb91-20e3-4dea-8616-82a619d725db","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-12572ff2-f205-4aff-b7c4-00cfa1ef5332","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-19c6e90f-9f94-4014-910f-4b7a5c0c57df","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-aeb1b7c3-044d-4311-84f8-e332ddba4125","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-bde57829-376f-4dee-bcfc-bed536fae9f2","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-271c2c75-28c0-4f33-94d9-85c73e0e1d03","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-19529803-6f70-432e-8ceb-53192b591df0","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c15f62c6-a353-4628-96b3-a247a8aa259a","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-cae5aa8c-d8a1-447d-ac86-46281d338d9f","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b82ecf3-0efd-4225-b21c-6fa0f2951e7e","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-5721ee17-4415-4993-b5d0-f8b0da24ef69 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 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