Всем привет. В этой статье я расскажу, как сделать анимацию на сайт на примере едущей машинки по ночному городу. Используя только HTML и CSS.
index.html
Анимация машинки на CSS | Антон Анискович
style.css
Исходные изображения:
Видео с пошаговой инструкцией:
Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.
Мои услуги:
- Создание сайтов
- Доработка сайтов
- Поддержка и обслуживание сайтов
- Настройка контекстной рекламы
- SEO продвижение
- Внедрение CRM систем
Рекомендую к прочтению:
АНИМАЦИЯ АВТО В CINEMA 4D | ОБУЧАЮЩИЙ УРОК | TUTORIAL 2021
Источник: antonaniskovich.ru
Создание анимации векторного автомобиля в After Effects
Lesson 1 Introduction and project overview 01:22
Lesson 2 Importing our layers and animating the scene 12:59
Lesson 3 Animating the background layers 12:10
Lesson 4 Creating loopable layers in Illustrator 14:27
Lesson 5 Re-linking the Illustrator layers 05:55
Lesson 6 Animating the car 09:01
Lesson 7 Changing the atmosphere of our scene 14:36
Lesson 8 Animating the sun and rain-ahead sign 10:23
Lesson 9 Adding the rain and lightning 14:10
— В этих уроках мы узнаем как создать 2D анимацию авто в After Effects. Непосредственно создавать иллюстрации мы не будем. Начнем курс с импорта готовых файлов из Illustrator в After Effects. Далее будем анимировать наши слои, используя базовые выражения и эффекты, которые позволят быстрее выполнить нашу задачу. Также мы поговорим об изменении общей композиции в After Effects без правки исходных файлов.
Источник: videotuts.ru
Анимация движения автомобиля по дорогам города
У меня есть изображение автомобиля, нарисованное средствами SVG :
Есть также изображение карты города, по автомобильным дорогам которого я хотел был воспроизвести анимацию движения автомобиля: 
У меня получилось совместить в одном SVG карту города и изображение автомобиля. Кроме этого, с помощью команды анимации и свойства translate(x,y) мне удалось воспроизвести анимацию перемещения автомобиля по дороге. 
Анимация начинается после клика по карте
Однако, такая анимация позволят перемещать автомобиль только по прямой одного участка дороги, и это совсем не тот результат, который мне хотелось бы получить. Вопрос: Как мне воспроизвести анимацию движения автомобиля по всей дороге, которая изображена на карте города? И желательно, если это возможно, учесть следующий момент. Размер изображения карты города 1600×900.
И если у пользователя размер экрана меньше, то соответственно в моем примере и размер всего SVG элемента уменьшается, подстраиваясь под размер окна браузера. Так вот, как установить фиксированные размеры для SVG элемента (например 600×300) при том, чтобы размеры всех внутренних его элементов (карта и автомобиль) не уменьшались, и при движении автомобиля карта в след за ним передвигалась внутри SVG элемента?
Источник: ru.stackoverflow.com