Несколько анимаций на CSS

[dlod]

CSS Анимация "Плывущие облака"

Свойства Слоя:
Вкладка "Общие"
Режим: По умолчанию
Галочка: Относительный гориз. размер
Выравниванме: По центру

Вкладка "Стиль"
Режим: Изображение
Изображение: выберите свою картинку
Повтор: По горизонтали
Горизантально: Слева (или своё значение)
Вертикально: Сверху (или своё значение)

Вкладка "CSS3 анимация"
В самой верхней части нажать на кнопку - Добавить
Далее: Менеджер анимаций - Добавить - пишем имя анимации на латинице
Нажимаем кнопку - Добавить
Ключевой кадр: 0
Свойство: background-position
Значение: 0px 0px, 0px 0px, 0px 0px
Ok

Опять нажимаем кнопку - Добавить
Ключевой кадр: 100
Свойство: background-position
Значение: 10000px 0px, 0px 0px, 0px 0px
Ok

Анимация: найдите имя вашей анимации и выберете её
Длительность: 400000
Счётчик повторов: -1 (для зацикливания анимации)
Направление: nomal (или reverse)
Остальные настройки оставьте по умолчанию программы.
Усё!

В html исходнике слоя во вкладке "Особый стиль" прописать: z-index:1;
Если у вас ширина страницы 970, тогда и ширина слоя должна быть 970

Длительность: 400000 это скорость анимации. Управлять скорость можно изменив первую цифру например: 300000 или 900000 и т. п.( от 1 до 9).

Пример: http://trtr.96.lt/Oblaka.html

Отправлено спустя 1 минуту 27 секунд:
CSS3 Анимация "Падающий снег"

Свойства Слоя:
Вкладка "Общие"
Режим: Прикрепляющийся или По умолчанию
Связывание: Заполнение
* Галочка: Относительный гориз. размер
* если выбрали режим по умолчанию
Выравнивание: По центру

Вкладка "Стиль"
Режим: Изображение
Изображение: выберите свою картинку
Повтор: В обоих направлениях
Горизонтально: Слева (или своё значение)
Вертикально: Сверху (или своё значение)

Вкладка "CSS3 анимация"
В самой верхней части нажать на кнопку - Добавить
Далее: Менеджер анимаций - Добавить - пишем имя анимации на латинице
Нажимаем кнопку - Добавить
Ключевой кадр: 0
Свойство: background-position
Значение: 0px 0px, 0px 0px, 0px 0px
Ok

Опять нажимаем кнопку - Добавить
Ключевой кадр: 100
Свойство: background-position
Значение: 500px 1000px, 400px 400px, 300px 300px
Ok

Анимация: найдите имя вашей анимации и выберете её
Длительность: 20000 (или своё значение)
Счётчик повторов: -1 (для зацикливания анимации)
Направление: nomal
Остальные настройки оставьте по умолчанию программы.
Усё!

В html исходнике слоя во вкладке "Особый стиль" прописать: z-index:1;
Если у вас ширина страницы 970, тогда и ширина слоя должна быть 970

Пример: http://trtr.96.lt/Sneg.html

Отправлено спустя 2 минуты 17 секунд:
CSS3 Анимация "По вертикали"

Свойства Слоя:
Вкладка "Общие"
Режим: Прикрепляющийся или По умолчанию
Связывание: Заполнение
* Галочка: Относительный гориз. размер
* если выбрали режим по умолчанию
Выравнивание: По центру

Вкладка "Стиль"
Режим: Изображение
Изображение: выберите свою картинку
Повтор: В обоих направлениях
Горизонтально: Слева (или своё значение)
Вертикально: Сверху (или своё значение)

Вкладка "CSS3 анимация"
В самой верхней части нажать на кнопку - Добавить
Далее: Менеджер анимаций - Добавить - пишем имя анимации на латинице
Нажимаем кнопку - Добавить
Ключевой кадр: 0
Свойство: background-position
Значение: 0px 0px
Ok

Опять нажимаем кнопку - Добавить
Ключевой кадр: 100
Свойство: background-position
Значение: 0px 10000px
Ok

Анимация: найдите имя вашей анимации и выберете её
Длительность: 300000
Счётчик повторов: -1 (для зацикливания анимации)
Направление: nomal
Остальные настройки оставьте по умолчанию программы.
Усё!

В html исходнике слоя во вкладке "Особый стиль" прописать: z-index:1;
Если у вас ширина страницы 970, тогда и ширина слоя должна быть 970

Длительность: 300000 это скорость анимации. Управлять скорость можно изменив первую цифру например: 400000 или 900000 и т. п.( от 1 до 9).

Пример: http://trtr.96.lt/po-vertikali.html

[Alex]

Полезно