如何用Keyframe在动画项目中正确创建和结构？

Question

我刚刚创建了一个组件，是一个 "加载" 而且它包含 动画 中的 "spinner"。

如果是在以前，我会在assets中创建一个.scss，然后在其中插入 "spinner"。@import 在组件中，但由于我在Angular 9x中，我也决定更新自己更多的关于...

直到我去文档中阅读了关于动画的内容，但说实话，在下面的要求中留下了一些不足。

1. 如何用Keyframes正确地创建动画并使用它们。
2. 如何像专业人员一样在项目中正确地组织这些动画。

说实话，我看不懂文档，怎么能这样做呢？

按照我下面的代码来做。

svg {
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;

    circle {
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
        -webkit-animation: dash 1.5s ease-in-out infinite;
        -ms-animation: dash 1.5s ease-in-out infinite;
        -moz-animation: dash 1.5s ease-in-out infinite;
        -o-animation: dash 1.5s ease-in-out infinite;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }
    }
    @-webkit-keyframes rotate {
        100% {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
        }
    }

    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150; /* 1%, 101% circumference */
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150; /* 70%, 101% circumference */
            stroke-dashoffset: -35; /* 25% circumference */
        }
        100% {
            stroke-dasharray: 90, 150; /* 70%, 101% circumference */
            stroke-dashoffset: -124; /* -99% circumference */
        }
    }
    @-webkit-keyframes dash {
        0% {
            stroke-dasharray: 1, 150; /* 1%, 101% circumference */
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150; /* 70%, 101% circumference */
            stroke-dashoffset: -35; /* 25% circumference */
        }
        100% {
            stroke-dasharray: 90, 150; /* 70%, 101% circumference */
            stroke-dashoffset: -124; /* -99% circumference */
        }
    }
}

Answer 1

你可以使用@keyframes与to和from看一下这个。例子 我觉得这是最简单的方法，可以减少你的代码。