WarmUp

#nerdearla

@carmenansio

Creación de SVG en Figma

Animación web

CSS Motion Path

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

Jugando con vectores

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

Vecteezy logo

#nerdearla

@carmenansio

Anatomia de una Animación

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

.mario-path-animation {
  offset-path: path("M100,250 C 100,50 400,50 400,250");
  animation: move 2s ease-out;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}


@media screen and (prefers-reduced-motion: reduce){
  .mario-path-animation {
    animation-duration: 1ms; /* lleva a la posición final de la animación */
  }
}

Easing

Duration

Properties

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

cubic-bezier(w, x, y, z)

#nerdearla

@carmenansio

#nerdearla

@carmenansio

CSS Motion Path

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

CSS Motion Kart

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

Animando un SVG

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

#nerdearla

@carmenansio

Recursos

#nerdearla

@carmenansio

Nerdearla 2021 | Super Mario Path

By Carmen Ansio

Nerdearla 2021 | Super Mario Path

Nerdearla 2021

  • 1,180

More from Carmen Ansio