How to timing an css3 shape animation for breathe recreation

Question

I have an Ionic 2 app and I need to recreate something like this with css3 shapes. I have already implemented it and it works very well for infinite expand and contract my circle, but I need to stop around 3 secs in the "hold" instruction, and then exhale.

This is my code:

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 (To sync the text inside):

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

score 1 · Accepted Answer · answered Mar 09 '17 at 21:08

You add 1, or more, stops to your keyframes rule

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

Thank you! I'll try it tomorrow :) – Ivan Lencina Mar 09 '17 at 21:37 — Ivan Lencina, Mar 09 '17 at 21:37

How to timing an css3 shape animation for breathe recreation

1 Answers1