@Link-Z

Почему не отрабатывает animation из css?

В общем все написано правильно вроде как, но не отрабатывает, а через tool возле заданного стиля animation желтый треугольник и надпись invalid property value. как это можно исправить

КОД:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>
    
        <div class="wave">
            <div class="wave__one"></div>
            <div class="wave__two"></div>
        </div>

</body>
</html>


CSS:
body{
	padding:0;
	margin:0;
	background-color: #555;
}

.wave{
	width:100%;
	overflow: hidden;
	position:relative;
}

.wave__one {
		background:url("img/wave/wave_top.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 15s infinite lianer;
		position:absolute;
		top:0;
	}

.wave__two {
		background:url("img/wave/wave_top_opacity.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 10s infinite lianer;
		position:relative;
		top:0;
	}

@keyframes waves {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -1938px;
	}
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
@venanen
MDN

/*@keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */

Получается будет так:
animation: 10s lianer 0s infinite normal none running waves;

Или
animation: 10s linear 0s waves;
animation-iteration-count: infinite;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы