Button Animation ohne Javascript

0 Pluspunkte 0 Minuspunkte
Wie kann ich HTML Elemente z.B einen Button ohne Javascript animieren?
bezieht sich auf eine Antwort auf: Was sind HTML Pseudo Elements und wie nutzt man sie
von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

In diesem Beispiel werden Keyframes verwendet. Keyframes sind ein Konzept in CSS, das es ermöglicht, eine Animation schrittweise zu definieren, indem bestimmte Zwischenzustände oder Schlüsselpositionen festgelegt werden.

<html>
<head>
    <title>Animierter Button ohne JavaScript</title>
    
    <style>
        .button {
            padding: 10px 20px;
            color: #fff;
            border: none;
            cursor: pointer;
            background-size: 200% auto;
            background-image: linear-gradient(45deg, green, red);
            animation: gradientShift 1s infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
                color: blue;
            }
            50% {
                background-position: 100% 50%;
                color: pink;
            }
            100% {
                background-position: 0% 50%;
                color: yellow;
            }
        }
    </style>
    
</head>
<body>

    <button class="button">Gradient-Animation</button>
    
</body>
</html>
von  

Ähnliche Fragen