r3plica r3plica - 1 month ago 19
CSS Question

CSS fade-in opacity resets after animation

I have this animation, which I have set up like this:

$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; } }


The effects are great, but when my text-last gets the the end of the animation, it resets the opacity back to 0.
Does anyone know how I can stop this from happening?

Here is a codepen:

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

DBS DBS
Answer

You can use animation-fill-mode: forwards; to maintain the final state of a CSS animation.

Simply add it to .text-last with the other animation properties.

See the full fill-mode documentation here