CSS нарастающий в непрозрачности сбрасывает после анимации

Question

У меня есть эта анимация, которую я поставил так:

$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798; 

.text--line { 
    font-size: .5em; 
    color: transparent; 
} 

svg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: hsl(200,70,11); 
    background-size: .12em 100%; 
    font: 16em/1 Arial; 
    z-index: 20000; 
} 

.text-last { 
    fill: white; 
    stroke: white; 


    opacity:0; 
    animation: fadeIn ease-in 1; 
    animation-duration:1s; 
    animation-delay:3s; 
} 

$max: 5; 
$stroke-step: 7%; 
.text-copy { 
    fill: none; 
    stroke: white; 
    stroke-dasharray: $stroke-step $stroke-step * ($max - 1); 
    stroke-width: 1px; 

    animation: stroke-offset 3s 1 linear; 

    @for $item from 1 through $max { 
     $stroke-color: nth($colors, $item); 

     &:nth-child(#{$item}) { 
      stroke: $stroke-color; 
      stroke-dashoffset: $stroke-step * $item; 
     } 
    } 
} 

@keyframes stroke-offset { 
    0% { 
    stroke-dashoffset: $stroke-step * $max; 
    stroke-dasharray: 0 $stroke-step * $max*2.5; 
    } 
} 

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

эффекты велики, но когда мой текста последней получает конца анимации, он сбрасывает непрозрачность до 0. Кто-нибудь знает, как я могу остановить это?

Вот codepen:

http://codepen.io/r3plica/pen/amQrZZ

Answer 1

Вы можете использовать animation-fill-mode: forwards; для поддержания конечного состояния CSS-анимации.

Просто добавьте его в .text-last с другими свойствами анимации.

See the full fill-mode documentation here