CSS permite a animação de elementos HTML sem usar JavaScript. Uma animação permite que um elemento sistematicamente e com o tempo adequado, mude de um estilo para outro. Você pode alterar as propriedades CSS que desejar, número final de vezes, conforme desejar. Para usar animação CSS, você deve primeiro especificar alguns @keyframes para a animação. @keyframes irá descrever quais estilos aquele elemento terá em momentos específicos.  

Estaremos usando um exemplo básico, como a animação de um carregamento de bateria.  

A propriedade @keyframes tem a opção de dividir o tempo da animação em partes / porcentagem e realizar uma atividade que é especificada para aquela parte de toda a duração da animação. a propriedade @keyframes é dada a cada animação de acordo com o nome dessa animação. Ele também permite que você execute a animação infinitamente. 

Aqui está um bloco CSS simples que explica o uso de @keyframes: 

Exemplo: Uso de @keyframes em uma mudança de cor de fundo.

<!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:





Nota: Ao usar @keyframes, existem algumas diretrizes definidas para você criar uma animação suave e funcional. Diretrizes como, certifique-se de tornar as transições suaves e especifique quando a mudança de estilo acontecerá em porcentagem ou com as palavras-chave “de” e “para”, que é o mesmo que 0% e 100%. 0% é quando a animação vai começar, 100% é quando a animação é concluída. Para obter o melhor suporte do navegador, ou seja, para garantir que a animação seja compatível com todos os navegadores da Internet, defina sempre os seletores 0% e 100%.


A animação para o carregamento de uma bateria é importante, pois ajuda você a entender como a propriedade @keyframes o ajudará a cronometrar sua animação em intervalos perfeitos e, portanto, ajudará a tornar as transições mais suaves. O carregamento da bateria é usado para explicar como você pode definir várias animações dentro de um determinado período de tempo, especificando a porcentagem de divisão, exatamente como no exemplo a bateria carrega de 0-25%, depois de 25-50% e assim por diante .


<!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: