如何为css3形状动画计时以进行呼吸娱乐

我有一个离子2应用程序，我需要重新创建类似css3形状的东西。 我已经实现了它，它对无限扩展和收缩我的循环非常有效，但是我需要在hold指令中停止大约3秒，然后呼气

这是我的代码：

HTML:

键入脚本以同步其中的文本：

---

向关键帧规则添加1个或多个停止点

---

非常感谢。我明天试试看：

<div class="breathClose" text-center>
    <img src="img/breath-close100.png" width="40" (click)="breathClose()">
</div>
<div class="element">
    <p [style.left]="instructionPosition">
        {{ breatheInstruction }}
    </p>
</div>

.element p {
        top: 39%;
        left: 40%;
        position: absolute;
        font-size: 1.5em;
    }
    .element {
        position: relative;
        background-color: #0eb3eb;
        color: #fff;//#43598c;
        width: 300px;
        height: 300px;
        margin: 8em auto 5em auto;
        text-align: center;
        transition: all 8s ease;
        // new function syntax for webkit browsers
        shape-inside: circle(75px at 150px 150px);
        -webkit-clip-path: circle(75px at 150px 150px);
        -moz-clip-path: circle(75px at 150px 150px);
        -ms-clip-path: circle(75px at 150px 150px);

        -webkit-animation: scale 8s ease infinite;
        -moz-animation: scale 8s ease infinite;
        -ms-animation: scale 8s ease infinite;

        shape-padding: 15px;
    }

@keyframes scale {
        0% {
            shape-inside: circle(75px at 150px 150px);
            -webkit-clip-path: circle(75px at 150px 150px);
            -moz-clip-path: circle(75px at 150px 150px);
            -ms-clip-path: circle(75px at 150px 150px);
        }
        50% {
            shape-inside: circle(150px at 150px 150px);
            -webkit-clip-path: circle(150px at 150px 150px);
            -moz-clip-path: circle(150px at 150px 150px);
            -ms-clip-path: circle(150px at 150px 150px);
        }
        100% {
            shape-inside: circle(75px at 150px 150px);
            -webkit-clip-path: circle(75px at 150px 150px);
            -moz-clip-path: circle(75px at 150px 150px);
            -ms-clip-path: circle(75px at 150px 150px);
        }
    }

public switchInstruction(): void {

        this.breatheInstruction = this.BREATHE_INSTRUCTION_INHALE;

        let hold = setTimeout(() => {
            this.holdTimeout = hold;
            clearTimeout(hold);
            this.breatheInstruction = this.BREATHE_INSTRUCTION_HOLD;
            this.centerInstruction();

            let exhale = setTimeout(() => {
                this.exhaleTimeout = exhale;
                clearTimeout(exhale);
                this.breatheInstruction = this.BREATHE_INSTRUCTION_EXHALE;
                this.reestablishInstructionPosition();

                let repeat = setTimeout(() => {
                    this.repeatTimeout = repeat;
                    clearTimeout(repeat);
                    this.switchInstruction();

                }, this.TIME_EXHALING);
            }, this.TIME_HOLDING);
        }, this.TIME_INHALING);
    }

@keyframes scale {
    0% {
        shape-inside: circle(75px at 150px 150px);
        -webkit-clip-path: circle(75px at 150px 150px);
        -moz-clip-path: circle(75px at 150px 150px);
        -ms-clip-path: circle(75px at 150px 150px);
    }
    40% {
        shape-inside: circle(150px at 150px 150px);
        -webkit-clip-path: circle(150px at 150px 150px);
        -moz-clip-path: circle(150px at 150px 150px);
        -ms-clip-path: circle(150px at 150px 150px);
    }
    60% {
        shape-inside: circle(150px at 150px 150px);
        -webkit-clip-path: circle(150px at 150px 150px);
        -moz-clip-path: circle(150px at 150px 150px);
        -ms-clip-path: circle(150px at 150px 150px);
    }
    100% {
        shape-inside: circle(75px at 150px 150px);
        -webkit-clip-path: circle(75px at 150px 150px);
        -moz-clip-path: circle(75px at 150px 150px);
        -ms-clip-path: circle(75px at 150px 150px);
    }
}