Rominou34/soft-css

/* CONFIGURE THE ANIMATIONS HERE */
    $heartbeat-color-start: #c82a2a;
    $heartbeat-color-begin: #c33737;
    $heartbeat-color-peak: #d66969;
    $heartbeat-color-finish: #d75858;

    $color-fadeout: lighten($primary-color, 25%);

/*************** CLASSES ***************/

/*** PLOP ***/
.animation-plop {
  animation: plop 200ms 0s ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*** HEARTBEAT COLOR ***/
.animation-heartbeat-color {
    animation: heartbeat-color 0.75s 0s ease;
    animation-iteration-count: infinite;
}

/*** HEARTBEAT SCALE ***/
.animation-heartbeat-scale {
    animation: heartbeat-scale 0.75s 0s ease;
    animation-iteration-count: infinite;
}

/*** HEARTBEAT ***/
.animation-heartbeat {
    animation: heartbeat-color 0.75s 0s ease,  heartbeat-scale 0.75s 0s ease;
    animation-iteration-count: infinite;
}

/*** FADEOUT ***/
.animation-fadeout {
    animation: fadeout 2s 0s ease;
    animation-fill-mode: both;
}

#heartbeat {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
    border-radius: 20%;
    background-color: #ffa3a3;
    border: 2px solid $red-color;
    margin-left: 50px;
}

/*************** ANIMATIONS ***************/

/*** PLOP ***/
@keyframes plop {
    0% {
        -webkit-transform: scale(0.01, 0.01);
        -ms-transform: scale(0.01, 0.01);
        transform:scale(0.01,0.01);
        opacity:0;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
        opacity:1;
    }
}

@-webkit-keyframes plop {
    0% {
        -webkit-transform: scale(0.01, 0.01);
        -ms-transform: scale(0.01, 0.01);
        transform:scale(0.01,0.01);
        opacity:0;
    }
    100% {
        -webkit-transform: scale(1.3, 1.3);
        -ms-transform: scale(1.3, 1.3);
        transform:scale(1.3,1.3);
        opacity:1;
    }
}

/*** SLIDE DOWN ***/
/*********** DISCONTINUED ***********/
@keyframes slide-down {
    0% {
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        transform:scale(1,0);
    }
    100% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
}

@-webkit-keyframes slide-down {
    0% {
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        transform:scale(1,0);
    }
    100% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
}

/*** SLIDE ***/
/************** DISCONTINUED *******/
@keyframes slide {
    0% {
        height:0;
    }
    100% {
        height:200px;
    }
}

@-webkit-keyframes slide {
    0% {
        height:0;
    }
    100% {
        height:200px;
    }
}

/*** HEARTBEAT SCALE ***/
@keyframes heartbeat-scale {
    0% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
    40% {
        -webkit-transform: scale(1.02, 1.02);
        -ms-transform: scale(1.02, 1.02);
        transform:scale(1.02,1.02);
    }
    60% {
        -webkit-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform:scale(1.2,1.2);
    }
    70% {
        -webkit-transform: scale(1.15, 1.15);
        -ms-transform: scale(1.15, 1.15);
        transform:scale(1.15,1.15);
    }
    100% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
}

@-webkit-keyframes heartbeat-scale {
    0% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
    40% {
        -webkit-transform: scale(1.02, 1.02);
        -ms-transform: scale(1.02, 1.02);
        transform:scale(1.02,1.02);
    }
    60% {
        -webkit-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform:scale(1.2,1.2);
    }
    70% {
        -webkit-transform: scale(1.15, 1.15);
        -ms-transform: scale(1.15, 1.15);
        transform:scale(1.15,1.15);
    }
    100% {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform:scale(1,1);
    }
}

/*** HEARTBEAT COLOR ***/
@keyframes heartbeat-color {
    0% {
        background-color:$heartbeat-color-start;
    }
    40% {
        background-color:$heartbeat-color-begin;
    }
    60% {
        background-color:$heartbeat-color-peak;
    }
    70% {
        background-color:$heartbeat-color-finish;
    }
    100% {
        background-color:$heartbeat-color-start;
    }
}

@-webkit-keyframes heartbeat-color {
    0% {
        background-color:$heartbeat-color-start;
    }
    40% {
        background-color:$heartbeat-color-begin;
    }
    60% {
        background-color:$heartbeat-color-peak;
    }
    70% {
        background-color:$heartbeat-color-finish;
    }
    100% {
        background-color:$heartbeat-color-start;
    }
}

/*** SPIN RIGHT ***/
@keyframes spin-right {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin-right {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*** COLOR FADE OUT ***/
@keyframes color-fadeout {
    0% {
        background-color: $color-fadeout;
    }
    100% {
        background-color: inherit;
    }
}

@-webkit-keyframes color-fadeout {
    0% {
        background-color: $color-fadeout;
    }
    100% {
        background-color: inherit;
    }
}

/*** OPACITY FADE OUT ***/
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}