.card-example
    .add-button
        .icon +
    .content 1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fugit aut soluta amet, eaque labore, inventore, ratione magni laboriosam sapiente incidunt id culpa explicabo. Necessitatibus, esse. Eaque ad quibusdam rerum.
    .popup-card 2) Id voluptatibus architecto repudiandae quibusdam, libero facilis quae blanditiis repellendus nihil quaerat sapiente, explicabo provident eveniet similique vitae, quasi dolorem nostrum cumque!
View Compiled 
@import url('https://fonts.googleapis.com/css?family=Lato');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-family: 'Lato', sans-serif;
}

body {
    background: #eee;
}



// -------------
// CARD EXAMPLE
// -------------

.card-example {
    position: relative;
    width: 20rem;
    max-width: 90%;
    margin: 3rem auto;
    border-radius: .3rem;
    background: #fff;
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .1);

    > .content {
        padding: 1rem;
    }
}



// -------------
// ADD BUTTON
// -------------

@keyframes expand-button {
    0% {
        top: -1.5rem;
        right: 1rem;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
    30% {
        top: 30%;
        right: 20%;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
    99% {
        top: 50%;
        right: 50%;
        height: 100%;
        width: 100%;
        border-radius: 0;
        opacity: 1;
        transform: translateX(50%) translateY(-50%);
    }
    100% {
        top: 50%;
        right: 50%;
        height: 100%;
        width: 100%;
        border-radius: 0;
        opacity: 0;
        transform: translateX(50%) translateY(-50%);
    }
}

.add-button {
    position: absolute;
    top: -1.5rem;
    right: 1rem;
    height: 3rem;
    width: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 2rem;
    border-radius: 50%;
    background: #0cc;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .1);

    > icon { 
        transition: all .3s cubic-bezier(.7,.15,.36,.88);
    }

    &.-expanded {
        animation: expand-button .5s linear;
        animation-fill-mode: forwards;
        pointer-events: none;

        > .icon {
            opacity: 0;
        }
    }

    &.-restored {
        animation: expand-button .4s reverse linear;
        animation-fill-mode: forwards;
        pointer-events: auto;

        > .icon {
            opacity: 1;
        }
    }
}



// -------------
// POPUP CARD
// -------------

@keyframes show-popup {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.popup-card {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    background: #0cc;
    border-radius: .3rem;

    &.-hidden {
        animation: show-popup .15s reverse cubic-bezier(.7,.15,.36,.88);
        animation-fill-mode: forwards;
        animation-delay: 0;
        pointer-events: none;
    }

    &.-visible {
        animation: show-popup .3s cubic-bezier(.7,.15,.36,.88);
        animation-fill-mode: forwards;
        animation-delay: .25s;
        pointer-events: auto;
    }
}
View Compiled 
const button = document.querySelector('.add-button');
const popup = document.querySelector('.popup-card');


let isActive = false;


setInterval(() => {
    isActive = !isActive;

    isActive ? open() : close();
}, 2000);


function open() {
    button.classList.remove('-restored');
    void button.offsetWidth;
    button.classList.add('-expanded');

    popup.classList.remove('-hidden');
    void popup.offsetWidth;
    popup.classList.add('-visible');
}


function close() {
    button.classList.remove('-expanded');
    void button.offsetWidth;
    button.classList.add('-restored');

    popup.classList.remove('-visible');
    void popup.offsetWidth;
    popup.classList.add('-hidden');
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.