HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation Fade Example</title>

  <style>

    @keyframes fadeIn {

      from {

        opacity: 0;

        transform: translateY(12px);

      }

      to {

        opacity: 1;

        transform: translateY(0);

      }

    }



    .card {

      padding: 16px 20px;

      background: #dbeafe;

      border-radius: 8px;

      animation: fadeIn 0.8s ease-out forwards;

    }

  </style>

</head>

<body>

  <h1>Simple Fade-In Animation</h1>



  <div class="card">This card fades in using the animation shorthand.</div>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation Property - Simple Fade-In