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

效果很棒，但当我的 text-last 获得动画结束时，它会将不透明度重置为0。有谁知道我怎么能阻止这种情况发生？

这是一个codepen：

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

Answer 1

您可以使用animation-fill-mode: forwards;来维护CSS动画的最终状态。

只需将其与其他动画属性一起添加到.text-last。

See the full fill-mode documentation here

动画后CSS淡入不透明度重置

1 个答案: