CSS Анимация, которая постоянно перемещается

У меня есть анимация CSS, которую я создал, которая имитирует воду, путешествующую по туннелю. Он использует только одно изображение, которое я также создал. Анимация работает, но не движется плавно. Я хочу, чтобы анимация постоянно перемещалась справа налево, где анимация имеет фиксированную ширину, равную 500/600 пикселей.CSS Анимация, которая постоянно перемещается

Heres код, который я до сих пор:

@-moz-keyframes waves{ 
    0%{ 
     left:0 
    } 

    100%{ 
     left:-580px 
    } 

} 



body{ 
    background:#e6e6e5; 
    overflow:hidden 
} 

.waves{ 
    position:fixed; 
    bottom:0; 
    width:640px; 
    z-index:0; 
    opacity:0.75 
} 

.waves .wave{ 
    left: 150px; 
    position:absolute; 
    width:1200px; 
    height:100px; 
    background-image:url(images/flow.png); 
    background-repeat:repeat-x 
} 

.waves .wave.bottom-wave{ 
    -moz-animation:waves 10s infinite linear; 
    -webkit-animation:waves 17s infinite linear; 
    animation:waves 10s infinite linear; 
    bottom:164px 
} 

<html> 
    <body> 
     <div class="waves">   
     <div class="wave bottom-wave"></div> 
     </div> 
    </body> 
</html>

Любая помощь приветствуется.

источник

2015-02-13 raymar

Можете ли вы добавить свой соответствующий html, чтобы мы могли сделать скрипку/перо? Или вы могли бы сделать jsfiddle или codepen? –

Привет @JustinBreiland Я добавил html, а также ссылку на анимацию, она находится на самых основных этапах, но я думаю, что это показывает, чего я пытаюсь достичь. – raymar

Я не вижу анимации в Chrome. – isherwood

Вместо того, чтобы перемещать его на 100% влево, сделайте его как минимум в два раза больше размера контейнера и после половины пройденного прыжка назад в первое состояние. Таким образом, вы никогда не достигнете конца.

Поскольку я был слишком ленив, чтобы узнать, как долго длится один волновой период, я просто дважды взял изображение и сбросил его после того, как ширина изображения прошла (708 пикселей).

@-moz-keyframes waves { 
 
    0%{ 
 
     margin-left: 0; 
 
    } 
 

 
    100%{ 
 
     margin-left: -708px; /* end after exactly one image width */ 
 
    } 
 
} 
 

 
.waves { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 20px; 
 
    width: 800px; 
 
    height: 80px; 
 
    overflow: hidden; 
 
} 
 

 
.waves .wave{ 
 
    margin-left: 0; 
 

 
    width: 1416px; /* twice the image's width */ 
 
    height: 80px; 
 
    background-image: url(http://quarter.cs.stir.ac.uk/~rsm/images/flow.png); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.waves .wave.bottom-wave{ 
 
    -moz-animation:waves 10s infinite linear; 
 
    -webkit-animation:waves 17s infinite linear; 
 
    animation:waves 10s infinite linear; 
 
}

<body> 
 
    <div class="waves">   
 
     <div class="wave bottom-wave"></div> 
 
    </div> 
 
</body>

Обратите внимание, что я пересекаю-сайт связали волны изображения, изменение, обратно, если вы решили скопировать и вставить эту. Также я изменил волну на использование относительного позиционирования и margin-left, потому что абсолютное позиционирование не имеет преимуществ и просто сложнее поддерживать (особенно с учетом чувствительности).

источник

2015-02-13 19:57:03 sol

Хорошее решение, лучше, чем тот, который я собирался опубликовать. –

Я могу только догадываться, каким было бы ваше решение, но ... две волны? – sol

Да, я использовал: раньше, чтобы создать вторую волну. –

CSS Анимация, которая постоянно перемещается

ответ

Смежные вопросы