Estoy aprendiendo a animar en CSS.
Cuando ejecuto este código en Codepen uso este preprocesador:
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>