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

Question

我有一个 Ionic 2 应用程序，我需要用 css3 形状重新创建类似 this 的东西。我已经实现了它，它非常适合无限扩展和收缩我的圈子，但我需要在 "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

您在 keyframes 规则中添加了 1 个或更多停靠点

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

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

How to timing an css3 shape animation for breathe recreation

css

css-shapes

ionic2