0

Хочу сделать сдвиг квадрата влево, но не пойму, почему не запускается анимация... Помогите, пожалуйста

.b{
    width: 150px;
    height: 150px;
    background-color: rgb(88, 68, 68);
    animation: 2s face alternate infinite;
}

@keyframes face{
    from{left: 0;}
    to{left: 300px;}
}
<!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="tar.css">
    <title>Document</title>
</head>
<body>
    <div class="b"></div>
</body>
</html>

2 ответа 2

0

.b {
  width: 150px;
  height: 150px;
  background-color: rgb(88, 68, 68);
  animation: 2s face alternate infinite;
}

@keyframes face {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}
<div class="b"></div>

0

вместо left используй margin-left

left изпользуется при position: absolute , relative , fixed https://www.w3schools.com/cssref/pr_pos_left.asp

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.