@cupcake-ds/cc-props/src/props.animations.js

- [https://unpkg.com/@cupcake-ds/cc-props/](https://unpkg.com/@cupcake-ds/cc-props/) - [https://unpkg.com/@cupcake-ds/cc-props/cc-props.min.css](https://unpkg.com/@cupcake-ds/cc-props/cc-props.min.css) - [https://unpkg.com/@cupcake-ds/cc-props/normalize.m

export default {
  "--animation-fade-in": ["fade-in .5s var(--ease-3)", `
@keyframes fade-in {
  to { opacity: 1 }
}`],
  "--animation-fade-out": ["fade-out .5s var(--ease-3)", `
@keyframes fade-out {
  to { opacity: 0 }
}`],
  "--animation-scale-up": ["scale-up .5s var(--ease-3)", `
@keyframes scale-up {
  to { transform: scale(1.25) }
}`],
  "--animation-scale-down": ["scale-down .5s var(--ease-3)", `
@keyframes scale-down {
  to { transform: scale(.75) }
}`],
  "--animation-slide-out-up": ["slide-out-up .5s var(--ease-3)", `
@keyframes slide-out-up {
  to { transform: translateY(-100%) }
}`],
  "--animation-slide-out-down": ["slide-out-down .5s var(--ease-3)", `
@keyframes slide-out-down {
  to { transform: translateY(100%) }
}`],
  "--animation-slide-out-right": ["slide-out-right .5s var(--ease-3)", `
@keyframes slide-out-right {
  to { transform: translateX(100%) }
}`],
  "--animation-slide-out-left": ["slide-out-left .5s var(--ease-3)", `
@keyframes slide-out-left {
  to { transform: translateX(-100%) }
}`],
  "--animation-slide-in-up": ["slide-in-up .5s var(--ease-3)", `
@keyframes slide-in-up {
  from { transform: translateY(100%) }
}`],
  "--animation-slide-in-down": ["slide-in-down .5s var(--ease-3)", `
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}`],
  "--animation-slide-in-right": ["slide-in-right .5s var(--ease-3)", `
@keyframes slide-in-right {
  from { transform: translateX(-100%) }
}`],
  "--animation-slide-in-left": ["slide-in-left .5s var(--ease-3)", `
@keyframes slide-in-left {
  from { transform: translateX(100%) }
}`],
  "--animation-shake-x": ["shake-x .75s var(--ease-out-5)", `
@keyframes shake-x {
  0%, 100% { transform: translateX(0%) }
  20% { transform: translateX(-5%) }
  40% { transform: translateX(5%) }
  60% { transform: translateX(-5%) }
  80% { transform: translateX(5%) }
}`],
  "--animation-shake-y": ["shake-y .75s var(--ease-out-5)", `
@keyframes shake-y {
  0%, 100% { transform: translateY(0%) }
  20% { transform: translateY(-5%) }
  40% { transform: translateY(5%) }
  60% { transform: translateY(-5%) }
  80% { transform: translateY(5%) }
}`],

  "--animation-spin": ["spin 2s linear infinite", `
@keyframes spin {
  to { transform: rotate(1turn) }
}`],
  "--animation-ping": ["ping 5s var(--ease-out-3) infinite", `
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}`],
  "--animation-blink": ["blink 1s var(--ease-out-3) infinite", `
@keyframes blink {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .5
  }
}`],
  "--animation-float": ["float 3s var(--ease-in-out-3) infinite", `
@keyframes float {
  50% { transform: translateY(-25%) }
}`],
  "--animation-bounce": ["bounce 2s var(--ease-squish-2) infinite", `
@keyframes bounce {
  25% { transform: translateY(-20%) }
  40% { transform: translateY(-3%) }
  0%, 60%,100% { transform: translateY(0) }
}`],
  "--animation-pulse": ["pulse 2s var(--ease-out-3) infinite", `
@keyframes pulse {
  50% { transform: scale(.9,.9) }
}`],
}