SIMPLE CSS-ONLY ARROW

THE HTML

[{"selector":"#anim-4d136ad5-92c5-4c15-88af-82f253417444","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] <p class="arrow">Arrow</p>

BASIC ARROW CSS

[{"selector":"#anim-ced74817-2899-416f-91e2-454e289248dc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-761a3961-d381-451a-b3fe-af1677f4b265","keyframes":{"transform":["translate3d(-114.73355%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2c840d5f-c5d3-4084-9c95-d3adad174dfe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8ab604da-e319-4569-a826-c69a4d958795","keyframes":{"transform":["translate3d(114.42007%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] ARROW "BASE" .arrow::before { display: inline-block; width: 30px; text-align: center; } ARROW DIRECTION .arrow::before { content: "\2191" }

ARROW ANIMATION

[{"selector":"#anim-44753aef-f243-4290-ae18-4e65c5b3baad","keyframes":{"opacity":[0,1]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-70048be9-07ed-45fd-bc96-38afaff34538","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":500,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] .arrow:hover::before { transform: rotate(90deg); transition: all 0.3s; }

FULL TUTORIAL

[{"selector":"#anim-ca159026-bc70-4108-9fb8-642c827cc137","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-3e82ad5d-561b-4b73-b746-310097afcee8","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-26b39445-fa47-412d-bc5e-d3519031da31","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

SIMPLE CSS-ONLY ARROW

THE HTML

01

BASIC ARROW CSS

02

ARROW ANIMATION

03

FULL TUTORIAL

CODE BOXX YOUTUBE

VISIT & FOLLOW

CODE BOXX PINTEREST