Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Animación de SVG con CSS Animaciones de Fotogramas Clave y Dibujo de Líneas Finalización de la secuencia de animación

Publicado por Melissa L
.a{fill-rule:evenodd;}techdegree
Melissa L
Desarrollo Web Front End Estudiante de Techdegree 10,296 Puntos

Los círculos pequeños pulsean juntos

Hola a todos,

No estoy seguro qué está mal en mi código. No puedo lograr que mis pequeños círculos pulsen individualmente. Por favor ayuda...

/* --------------------------
  Fotogramas clave
--------------------------- */
/*---animación de círculo exterior e interior---*/
@fotogramas clave crecer { /*---da un efecto de rebote---*/
  0% {
    transformar: scale(0);
  }
  30% {
    transformar: scale(1.1);
  }
  60% {
    transformar: scale(0.9);
  }
}

/*---animación de estrella---*/
@fotogramas clave girar {
  0% {
    transformar: rotar(0) scale(0);
    opacity: 0;
  }
  60% {
    transformar: rotar(375grados) scale(1.1);
  }
  80% {
    transformar: rotar(355grados) scale(0.9);
  }
  100% {
    transformar: rotar(360grados) scale(1);
  }
}

/*---pequeños círculos pulsan---*/
@fotogramas clave pulso {
  50% {
    transformar: scale(1.4);
  }
}

/* --------------------------
  Estilos SVG
--------------------------- */

/*---animación de círculo exterior e interior---*/
.insignia * { 
  transform-origin: center;
  transform-box: fill-box; 
}

.exterior,
.interior,
.inline {
  animation: crecer 1s ease-out hacia atrás;
}

.interior {
  retraso de animación: .1s;
}

.inline {
  retraso de animación: .15s;
}

/*---animación de estrella---*/
.estrella {
  animation: girar 1.1s .2s ease-out hacia atrás; 
}

/*---pequeños círculos pulsan---*/
.estrella circle {
  animation: pulso .7s 1.5s;
}

  .estrella círculo:nth-of-type(2) { 
    retraso de animación: 1.6s;
  }

  .estrella círculo:nth-of-type(3) { 
    retraso de animación: 1.7s;
  }

  .estrella círculo:nth-of-type(4) { 
    retraso de animación: 1.8s;
  }

  .estrella círculo:nth-of-type(5) { 
    retraso de animación: 1.9s;
  }