Нужна помощь для CSS

Question

Я пытаюсь сделать эту анимацию:

http://codepen.io/suez/pen/ZGWbmE

*, *:before, *:after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.heart-loader { 
    position: absolute; 
    display: block; 
    left: 50%; 
    top: 50%; 
    margin-top: -90px; 
    width: 180px; 
    height: 180px; 
    overflow: visible; 
} 
.heart-loader__group { 
    -webkit-transform-origin: 0 90px; 
     -ms-transform-origin: 0 90px; 
      transform-origin: 0 90px; 
    -webkit-animation: group-anim 7s 1s infinite; 
      animation: group-anim 7s 1s infinite; 
} 
.heart-loader__square { 
    stroke: #B8B8B8; 
    stroke-dasharray: 240, 240; 
    stroke-dashoffset: 240; 
    -webkit-animation: square-anim 7s 1s infinite; 
      animation: square-anim 7s 1s infinite; 
} 
.heart-loader__circle { 
    stroke: #B8B8B8; 
    stroke-dasharray: 188.522, 188.522; 
    stroke-dashoffset: 188.522; 
    -webkit-transform-origin: 60px 30px; 
     -ms-transform-origin: 60px 30px; 
      transform-origin: 60px 30px; 
} 
.heart-loader__circle.m--left { 
    -webkit-animation: left-circle-anim 7s 1s infinite; 
      animation: left-circle-anim 7s 1s infinite; 
} 
.heart-loader__circle.m--right { 
    -webkit-animation: right-circle-anim 7s 1s infinite; 
      animation: right-circle-anim 7s 1s infinite; 
} 
.heart-loader__heartPath { 
    stroke: #E21737; 
    fill: transparent; 
    stroke-dasharray: 308.522, 308.522; 
    stroke-dashoffset: 308.522; 
    -webkit-animation: heart-anim 7s 1s infinite; 
      animation: heart-anim 7s 1s infinite; 
} 

@-webkit-keyframes square-anim { 
    12% { 
    stroke-dashoffset: 0; 
    } 
    43% { 
    stroke-dashoffset: 0; 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    opacity: 0; 
    } 
} 

@keyframes square-anim { 
    12% { 
    stroke-dashoffset: 0; 
    } 
    43% { 
    stroke-dashoffset: 0; 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    opacity: 0; 
    } 
} 
@-webkit-keyframes left-circle-anim { 
    12% { 
    stroke-dashoffset: 188.522; 
    } 
    31% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
    } 
    41% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    } 
    43% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 0; 
    } 
} 
@keyframes left-circle-anim { 
    12% { 
    stroke-dashoffset: 188.522; 
    } 
    31% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
    } 
    41% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    } 
    43% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateY(-30px); 
      transform: translateY(-30px); 
    opacity: 0; 
    } 
} 
@-webkit-keyframes right-circle-anim { 
    12% { 
    stroke-dashoffset: 188.522; 
    } 
    31% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(0); 
      transform: translateX(0); 
    } 
    41% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    } 
    43% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 0; 
    } 
} 
@keyframes right-circle-anim { 
    12% { 
    stroke-dashoffset: 188.522; 
    } 
    31% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(0); 
      transform: translateX(0); 
    } 
    41% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    } 
    43% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 1; 
    } 
    85% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    -webkit-transform: translateX(30px); 
      transform: translateX(30px); 
    opacity: 0; 
    } 
} 
@-webkit-keyframes group-anim { 
    43% { 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    } 
    54% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    } 
    90% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 1; 
    } 
    97% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 0; 
    } 
} 
@keyframes group-anim { 
    43% { 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    } 
    54% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    } 
    90% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 1; 
    } 
    97% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    opacity: 0; 
    } 
} 
@-webkit-keyframes heart-anim { 
    55% { 
    stroke-dashoffset: 308.522; 
    fill: transparent; 
    } 
    70% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    87% { 
    stroke-dashoffset: 0; 
    fill: #E21737; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: #E21737; 
    } 
} 
@keyframes heart-anim { 
    55% { 
    stroke-dashoffset: 308.522; 
    fill: transparent; 
    } 
    70% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    87% { 
    stroke-dashoffset: 0; 
    fill: #E21737; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: #E21737; 
    } 
} 
.other { 
    position: absolute; 
    left: 0; 
    bottom: 0.5rem; 
    width: 100%; 
    text-align: right; 
} 
.other__link { 
    font-size: 1.3rem; 
    margin: 0 1rem; 
} 

случается только раз, а после остановки без перезагрузки.

Я попытался использовать animation-fill-mode: forwards, но он не работает.

Извините за мой плохой английский и спасибо всем за ответчиков!

Я установил, что использование animation-fill-mode в качестве последней команды для каждого объекта

Спасибо в любом случае за не поможет ...

Answer 1

Я установил, что использование анимации-заполняющей режим в качестве последней команды для каждого объекта