Animación CSS y propiedad @Keyframes

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS Animation and @Keyframes Property
    </title>
      
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 200px;
            border-radius: 100px;
            background-color: red;
            animation: circle 8s infinite;
        }
  
        @keyframes circle {
            0% {
                background-color: red;
            }
  
            25% {
                background-color: yellow;
            }
  
            50% {
                background-color: blue;
            }
  
            100% {
                background-color: green;
            }
        }
    </style>
</head>
  
<body>
    <div></div>
</body>
  
</html>
Output:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS Animation and @Keyframes Property
    </title>
  
    <style>
        body {
            background-color: #fff;
        }
  
        .battery {
            height: 140px;
            width: 321px;
            border: 5px solid #000;
            border-radius: 7px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
  
        .top {
            height: 40px;
            width: 25px;
            background-color: #000;
            position: relative;
            left: 325px;
            top: 52px;
            border-radius: 0 3px 3px 0;
        }
  
        .charge1,
        .charge2,
        .charge3,
        .charge4 {
            width: 75px;
            height: 130px;
            background-color: #3BC700;
            position: relative;
            opacity: 0;
        }
  
        .charge1 {
            margin: 9px 2px 3px 6px;
            bottom: 44px;
            animation: charge-1 2s infinite;
        }
  
        .charge2 {
            margin: 9px 9px 3px 9px;
            bottom: 183px;
            left: 75px;
            animation: charge-2 2s infinite;
        }
  
        .charge3 {
            margin: 9px 9px 3px 12px;
            bottom: 322px;
            left: 150px;
            animation: charge-3 2s infinite;
        }
  
        .charge4 {
            margin: 9px 2px 3px 15px;
            bottom: 461px;
            left: 225px;
            animation: charge-4 2s infinite;
        }
  
        @keyframes charge-1 {
  
            25%,
            100% {
                opacity: 1;
            }
        }
  
        @keyframes charge-2 {
  
            0%,
            25% {
                opacity: 0;
            }
  
            50%,
            100% {
                opacity: 1;
            }
        }
  
        @keyframes charge-3 {
  
            0%,
            50% {
                opacity: 0;
            }
  
            75%,
            100% {
                opacity: 1;
            }
        }
  
        @keyframes charge-4 {
  
            0%,
            75% {
                opacity: 0;
            }
  
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
  
<body>
    <div class="battery">
        <div class="top"></div>
        <div class="charge1"></div>
        <div class="charge2"></div>
        <div class="charge3"></div>
        <div class="charge4"></div>
    </div>
</body>
  
</html>
Output:

Publicación traducida automáticamente

Artículo escrito por sparkyboom y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *