\n From Left\n
\n (Repeat)\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
\n\n From Left\n
\n (No Repeat)\n
\n {`once={true}`}\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
Scale In Center
\n\n {`animation={'scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nRotate In Center
\n\n {`animation={'rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nSlide In Top
\n\n {`animation={'slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n\n Slide in Fwd / scale Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-fwd-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`\n animation_out={'scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Slide in Elliptic / Rotate Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
{`\n animation_out={'rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`\n top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Left / Rotate Out\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-left 0.6s ease-out both'}`}\n
\n {`animation_out={'rotate-out-2-cw 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Blurred / Swirl Out Bck\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'}`}\n
\n {`animation_out={'swirl-out-bck 0.6s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Tilt In Fwd / Flip Out Hor Top\n
\n (400 top/bottom)\n
\n {`animation={'tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`animation_out={'flip-out-hor-top 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Swing in Top / Slide Out Top\n
\n (400 top/bottom)\n
\n {`animation={'swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both'}`}\n
\n {`animation_out={'slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}>`}\n
\n Fade In / Slide Out\n
\n (400 top/bottom)\n
\n {`animation={'fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'}`}\n
\n {`animation_out={'slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Puff In Center / Slide Out Elliptic Top\n
\n (400 top/bottom)\n
\n {`animation={'puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both'}`}\n
\n {`animation_out={'slide-out-elliptic-top-bck 0.7s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n From Left\n
\n (Repeat)\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
\n\n From Left\n
\n (No Repeat)\n
\n {`once={true}`}\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
Scale In Center
\n\n {`animation={'scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nRotate In Center
\n\n {`animation={'rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nSlide In Top
\n\n {`animation={'slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n\n Slide in Fwd / scale Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-fwd-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`\n animation_out={'scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Slide in Elliptic / Rotate Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
{`\n animation_out={'rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`\n top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Left / Rotate Out\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-left 0.6s ease-out both'}`}\n
\n {`animation_out={'rotate-out-2-cw 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Blurred / Swirl Out Bck\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'}`}\n
\n {`animation_out={'swirl-out-bck 0.6s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Tilt In Fwd / Flip Out Hor Top\n
\n (400 top/bottom)\n
\n {`animation={'tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`animation_out={'flip-out-hor-top 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Swing in Top / Slide Out Top\n
\n (400 top/bottom)\n
\n {`animation={'swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both'}`}\n
\n {`animation_out={'slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}>`}\n
\n Fade In / Slide Out\n
\n (400 top/bottom)\n
\n {`animation={'fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'}`}\n
\n {`animation_out={'slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Puff In Center / Slide Out Elliptic Top\n
\n (400 top/bottom)\n
\n {`animation={'puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both'}`}\n
\n {`animation_out={'slide-out-elliptic-top-bck 0.7s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
yarn add saos
\nnpm i saos --save
',_=f(),k=l("section"),z=l("h3"),z.textContent="How to use",P=f(),j=l("p"),j.innerHTML='Make your animation or (if you are lazy like me) get it from:\n animista',S=f(),M=l("p"),M.textContent="Add the -global- before the name, like:",L=f(),B=l("code"),B.textContent="@keyframes -global-slide-out-fwd-center {",O=f(),R=l("p"),R.textContent="And use it with Saos, like:",F=f(),D=l("code"),D.textContent="yarn add saos
\nnpm i saos --save
',_=f(),k=l("section"),z=l("h3"),z.textContent="How to use",P=f(),j=l("p"),j.innerHTML='Make your animation or (if you are lazy like me) get it from:\n animista',S=f(),A=l("p"),A.textContent="Add the -global- before the name, like:",L=f(),O=l("code"),O.textContent="@keyframes -global-slide-out-fwd-center {",B=f(),R=l("p"),R.textContent="And use it with Saos, like:",F=f(),I=l("code"),I.textContent="\n From Left\n
\n (Repeat)\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
\n\n From Left\n
\n (No Repeat)\n
\n {`once={true}`}\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
Scale In Center
\n\n {`animation={'scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nRotate In Center
\n\n {`animation={'rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nSlide In Top
\n\n {`animation={'slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n\n Slide in Fwd / scale Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-fwd-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`\n animation_out={'scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Slide in Elliptic / Rotate Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
{`\n animation_out={'rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`\n top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Left / Rotate Out\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-left 0.6s ease-out both'}`}\n
\n {`animation_out={'rotate-out-2-cw 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Blurred / Swirl Out Bck\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'}`}\n
\n {`animation_out={'swirl-out-bck 0.6s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Tilt In Fwd / Flip Out Hor Top\n
\n (400 top/bottom)\n
\n {`animation={'tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`animation_out={'flip-out-hor-top 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Swing in Top / Slide Out Top\n
\n (400 top/bottom)\n
\n {`animation={'swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both'}`}\n
\n {`animation_out={'slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}>`}\n
\n Fade In / Slide Out\n
\n (400 top/bottom)\n
\n {`animation={'fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'}`}\n
\n {`animation_out={'slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Puff In Center / Slide Out Elliptic Top\n
\n (400 top/bottom)\n
\n {`animation={'puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both'}`}\n
\n {`animation_out={'slide-out-elliptic-top-bck 0.7s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n From Left\n
\n (Repeat)\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
\n\n From Left\n
\n (No Repeat)\n
\n {`once={true}`}\n
\n {`animation={'from-left 2s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}`}\n
Scale In Center
\n\n {`animation={'scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nRotate In Center
\n\n {`animation={'rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\nSlide In Top
\n\n {`animation={'slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n\n Slide in Fwd / scale Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-fwd-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`\n animation_out={'scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Slide in Elliptic / Rotate Out Center\n
\n (400 top/bottom)\n
\n {`animation={'slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
{`\n animation_out={'rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`\n top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Left / Rotate Out\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-left 0.6s ease-out both'}`}\n
\n {`animation_out={'rotate-out-2-cw 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Roll In Blurred / Swirl Out Bck\n
\n (400 top/bottom)\n
\n {`animation={'roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'}`}\n
\n {`animation_out={'swirl-out-bck 0.6s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Tilt In Fwd / Flip Out Hor Top\n
\n (400 top/bottom)\n
\n {`animation={'tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}`}\n
\n {`animation_out={'flip-out-hor-top 0.45s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Swing in Top / Slide Out Top\n
\n (400 top/bottom)\n
\n {`animation={'swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both'}`}\n
\n {`animation_out={'slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}>`}\n
\n Fade In / Slide Out\n
\n (400 top/bottom)\n
\n {`animation={'fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both'}`}\n
\n {`animation_out={'slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n
\n Puff In Center / Slide Out Elliptic Top\n
\n (400 top/bottom)\n
\n {`animation={'puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both'}`}\n
\n {`animation_out={'slide-out-elliptic-top-bck 0.7s ease-in both'}`}\n
\n {`top={400}`}\n
\n {`bottom={400}`}\n