Skip to main content
se añadieron 253 caracteres en el cuerpo
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Estoy aprendiendo a animar en CSS.

Pero cuando quiero usar VScode con la extensión de Live server, no me funciona pensé, 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>

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

Estoy aprendiendo a animar en CSS

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>

Estoy aprendiendo a animar en CSS.

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>

Origen Enlace
Ismael Ayala
  • 135
  • 1
  • 2
  • 15

No puedo ver las animaciones en CSS

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>