1

Estoy aprendiendo a animar en CSS.

Cuando ejecuto este código en Codepen uso este preprocesador:

introducir la descripción de la imagen aquí

Pero cuando quiero usar VScode con la extensión de Live server, no me funciona, pensé que era porque no lo subía a la web, pero cuando lo hice tampoco me funcionó, luego revisando, me dijeron que le ponga -webkit, pero tampoco funciona.

Este es el código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="normalize.css">
    <title>Document</title>

    <style>
        .circle{
            width:200px;
            height:200px;
            border-radius:50%;
            background-color:red;
            border:5px solid #000;
        }

        .circle:first-child {
            -webkit-animation:circle1 1s infinite alternate;

            @-webkit-keyframes circle1{
                to{
                    width:400px;
                    height:450px;
                }
            }
        }
    </style>

</head>
<body>
    
    <div class="circle">

    </div>

    
</body>
</html>

1 respuesta 1

1

Presentas varios problemas que impiden que la animación funcione correctamente. Una animación por @keyframes cuenta con dos cosas:

  1. La animación (el @heyframes propiamente dicho)
  2. La clase del elemento al que quieres aplicarla, además de la propiedades que quieres darle a la animación (en tu caso animation: circle1 1s infinite alternate.

En tu ejemplo estás tratando de meter la definición de la animación (el @keyframes) dentro de una clase, debes sacarla fuera. También estás definiendo la animación en otra regla que afecta a la clase .circulo, puedes meterla dentro de la que definiste en primer lugar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="normalize.css">
    <title>Document</title>

    <style>
          .circle{
            width:200px;
            height:200px;
            border-radius:50%;
            background-color:red;
            border:5px solid #000;
            animation:circle1 1s infinite alternate;
          }

          @keyframes circle1 {
              to{
                  width:400px;
                  height:450px;
              }
          }      
    </style>

</head>
<body>
    
    <div class="circle">

    </div>

    
</body>
</html>

2
  • gracias, eso era, pero en el tutorial que estoy viendo lo hace como lo puse en el ejemplo, ¿Por qué será? Commented el 2 mar. 2021 a las 4:00
  • A lo mejor se trata de algo específico de SCSS, aunque estuve buscando al respecto y no encontré ningún lado donde se usaran así las animaciones.
    – phpMyGuel
    Commented el 2 mar. 2021 a las 10:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.