В общем все написано правильно вроде как, но не отрабатывает, а через 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;
}
}
Простой
Средний
