如何定时CSS3塑造动画以进行呼吸

Question

我有一个离子2应用程序，我需要用CSS3形状重新创建这样的东西。我已经实施了它，它对无限扩展和收缩我的圈子非常有效，但是我需要在" Hold"指令中停止3秒钟，然后呼气。

这是我的代码：

html：

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

CSS：

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

typescript（在内部同步文本）：

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

Answer 1

您添加1个或更多，将keyframes规则停止

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