JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>CSS Animation Library</h1>
    <div class="animation-container">
        <div class="box bounce">Bounce</div>
        <div class="box shake">Shake</div>
        <div class="box pulse">Pulse</div>
        <div class="box fade">Fade</div>
        <div class="box rotate">Rotate</div>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

h1 {
    margin-bottom: 20px;
}

.animation-container {
    display: flex;
    gap: 20px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.box:hover {
    transform: scale(1.1);
}

/* Bounce Animation */
.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

/* Shake Animation */
.shake {
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Pulse Animation */
.pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Fade Animation */
.fade {
    animation: fade 2s infinite;
}

@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Rotate Animation */
.rotate {
    animation: rotate 2s infinite linear;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}