Add to Cart Animation

HTML

CSS

/* General body styling */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ebe8ff;
}

/* Button styling */
.btn-cart {
    position: relative;
    padding: 10px;
    width: 200px;
    height: 60px;
    border: 0;
    border-radius: 10px;
    background-color: #d4344e;
    outline: none;
    cursor: pointer;
    color: #fff;
    transition: .3s ease-in-out;
    overflow: hidden;
}

.btn-cart:hover {
    background-color: #d80d2e;
}

.btn-cart:active {
    transform: scale(.9);
}

/* Cart and box icons */
.icon-cart {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -10%;
    font-size: 2em;
    transform: translate(-50%, -50%);
}

.icon-box {
    position: absolute;
    z-index: 3;
    top: -20%;
    left: 52%;
    font-size: 1.2em;
    transform: translate(-50%, -50%);
}

/* Button text styling */
.btn-cart span {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    font-size: 1.2em;
    color: #fff;
    transform: translate(-50%, -50%);
}

/* Add To Cart text */
.text-add {
    opacity: 1;
}

/* Thank You! text */
.text-added {
    opacity: 0;
}

/* Animation classes */
.btn-cart.clicked .icon-cart {
    animation: cartMove 1.5s ease-in-out forwards;
}

.btn-cart.clicked .icon-box {
    animation: boxMove 1.5s ease-in-out forwards;
}

.btn-cart.clicked .text-add {
    animation: fadeOutText 1.5s ease-in-out forwards;
}

.btn-cart.clicked .text-added {
    animation: fadeInText 1.5s ease-in-out forwards;
}

/* Keyframe animations */
@keyframes cartMove {
    0% {
        left: -10%;
    }

40%,
    60% {
        left: 50%;
    }

100% {
        left: 110%;
    }
}

@keyframes boxMove {

0%,
    40% {
        top: -20%;
    }

60% {
        top: 40%;
        left: 52%;
    }

100% {
        top: 40%;
        left: 112%;
    }
}

@keyframes fadeOutText {
    0% {
        opacity: 1;
    }

20%,
    100% {
        opacity: 0;
    }
}

@keyframes fadeInText {

0%,
    80% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
}

JavaScript

Preview: Add to Cart Animation

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Add to Cart Animation

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: Add to Cart Animation

Login