Анимация блоков на js

523
31 мая 2017, 04:30

Всем привет. Имеется блок, внутри которого 100 блоков. Пытаюсь сделать анимацию, при которой сначала все строки прокручиваются, а потом проходит вертикальный столбец с заведомо известными блоками (1,11,21...). Я сделал так: сначала скопировал все элементы по горизонтали и дал анимацию классу window (left:-355). По такому же принципу думал сделать прокрутку вертикальных элементов, заранее дав им отдельный класс(phone-keys666). Проблема в том, что я не знаю как клонировать элементы, которые должны спускаться вниз, они просто накладываются друг на друга. Другие способы в голову не пришли. Сейчас они просто спускаются вниз, ничего не оставляя после себя. Всем спасибо
https://jsfiddle.net/daL76f4p/

<div class="backrul">
<div class="window0">
<div class="phone-keys0 phone-keys666">1</div>
<div class="phone-keys0">2</div>
<div class="phone-keys0">3</div>
<div class="phone-keys0">4</div>
<div class="phone-keys0">5</div>
<div class="phone-keys0">6</div>
<div class="phone-keys0">7</div>
<div class="phone-keys0">8</div>
<div class="phone-keys0">9</div>
<div class="phone-keys0">10</div>
</div> 
<div class="window1">
<div class="phone-keys1 phone-keys666">11</div>
<div class="phone-keys1">12</div>
<div class="phone-keys1">13</div>
<div class="phone-keys1">14</div>
<div class="phone-keys1">15</div>
<div class="phone-keys1">16</div>
<div class="phone-keys1">17</div>
<div class="phone-keys1">18</div>
<div class="phone-keys1">19</div>
<div class="phone-keys1">20</div>
</div> 
<div class="window2">
<div class="phone-keys2 phone-keys666">21</div>
<div class="phone-keys2">22</div>
<div class="phone-keys2">23</div>
<div class="phone-keys2">24</div>
<div class="phone-keys2">25</div>
<div class="phone-keys2">26</div>
<div class="phone-keys2">27</div>
<div class="phone-keys2">28</div>
<div class="phone-keys2">29</div>
<div class="phone-keys2">30</div>
</div> 
<div class="window3">
<div class="phone-keys3 phone-keys666">31</div>
<div class="phone-keys3">32</div>
<div class="phone-keys3">33</div>
<div class="phone-keys3">34</div>
<div class="phone-keys3">35</div>
<div class="phone-keys3">36</div>
<div class="phone-keys3">37</div>
<div class="phone-keys3">38</div>
<div class="phone-keys3">39</div>
<div class="phone-keys3">40</div>
</div> 
<div class="window4">
<div class="phone-keys4 phone-keys666">41</div>
<div class="phone-keys4">42</div>
<div class="phone-keys4">43</div>
<div class="phone-keys4">44</div>
<div class="phone-keys4">45</div>
<div class="phone-keys4">46</div>
<div class="phone-keys4">47</div>
<div class="phone-keys4">48</div>
<div class="phone-keys4">49</div>
<div class="phone-keys4">40</div>
</div> 
<div class="window5">
<div class="phone-keys5 phone-keys666">51</div>
<div class="phone-keys5">52</div>
<div class="phone-keys5">53</div>
<div class="phone-keys5">54</div>
<div class="phone-keys5">55</div>
<div class="phone-keys5">56</div>
<div class="phone-keys5">57</div>
<div class="phone-keys5">58</div>
<div class="phone-keys5">59</div>
<div class="phone-keys5">60</div>
</div> 
<div class="window6">
<div class="phone-keys6 phone-keys666">61</div>
<div class="phone-keys6">62</div>
<div class="phone-keys6">63</div>
<div class="phone-keys6">64</div>
<div class="phone-keys6">65</div>
<div class="phone-keys6">66</div>
<div class="phone-keys6">67</div>
<div class="phone-keys6">68</div>
<div class="phone-keys6">69</div>
<div class="phone-keys6">70</div>
</div> 
<div class="window7">
<div class="phone-keys7 phone-keys666">71</div>
<div class="phone-keys7">72</div>
<div class="phone-keys7">73</div>
<div class="phone-keys7">74</div>
<div class="phone-keys7">75</div>
<div class="phone-keys7">76</div>
<div class="phone-keys7">77</div>
<div class="phone-keys7">78</div>
<div class="phone-keys7">79</div>
<div class="phone-keys7">80</div>
</div>
<div class="window8">
<div class="phone-keys8 phone-keys666">81</div>
<div class="phone-keys8">82</div>
<div class="phone-keys8">83</div>
<div class="phone-keys8">84</div>
<div class="phone-keys8">85</div>
<div class="phone-keys8">86</div>
<div class="phone-keys8">87</div>
<div class="phone-keys8">88</div>
<div class="phone-keys8">89</div>
<div class="phone-keys8">90</div>
</div>
<div class="window9">
<div class="phone-keys9 phone-keys666">91</div>
<div class="phone-keys9">92</div>
<div class="phone-keys9">93</div>
<div class="phone-keys9">94</div>
<div class="phone-keys9">95</div>
<div class="phone-keys9">96</div>
<div class="phone-keys9">97</div>
<div class="phone-keys9">98</div>
<div class="phone-keys9">99</div>
<div class="phone-keys9">100</div>
</div> 
</div>
READ ALSO
Не выполняется запрос MYSQL

Не выполняется запрос MYSQL

Делаю такой запрос

272
Как получить дробную часть числа в MySQL?

Как получить дробную часть числа в MySQL?

Например, SQL запрос выдает сумму (деньги) - 6788987, т

483
VIEW MySQL UNION BIT field

VIEW MySQL UNION BIT field

У меня есть задача создать MySQL VIEW путем обеднения двух таблиц с помощью UNION, причем две таблицы имеют как общие поля так и разныек примеру в таблице...

398
Не находит файлы и каталоги Java.io.file

Не находит файлы и каталоги Java.io.file

По разному пишут, где то путь например File file = new File("C://wallpng"); А где то File file = new File("C:\\wall

347