CSS Анімація

body: висота 100vh, display flex, вирівнювання по центру по горизонталі та вертикалі (justify-content: center, align-items: center).
.orbit-container: ширина 600px, висота 600px, position relative.
.webuniverse: ширина 500px, position absolute, top 50%, left 50%, анімація orbit 4s linear infinite.
@keyframes orbit:
0%: transform: translate(-50%, -50%) rotate(0deg) translateX(80px) rotate(0deg);
100%: transform: translate(-50%, -50%) rotate(360deg) translateX(80px) rotate(-360deg);
Пояснення:
- translate(-50%, -50%) → центр елемента;
- translateX(80px) → радіус кола;
- перший rotate → рух елемента по колу;
- другий rotate → елемент сам по собі не крутиться, верх завжди догори.

У тілі сторінки:
Блок (div з класом orbit-container) містить картинку (img з класом webuniverse), яка обертається по колу завдяки анімації orbit.

body: margin 0, padding 0, height 100vh, background-image url('task2/background.jpg'), background-size cover, background-position center, overflow hidden, position relative.
.traffic-light: position absolute, top 40%, left 40%, ширина 40px, висота 275px, transform: translate(-50%, -50%), background-image url('task2/green.png'), background-size cover, animation changeLight 10s.
.car1: position absolute, width 500px, height auto, left -500px, animation drive1 4s linear infinite, animation-delay 6s.
@keyframes changeLight:
0%, 30% background red.png,
30.1%, 60% background yellow.png,
60.1%, 100% background green.png.
@keyframes drive1:
0% bottom 230px, left -500px;
100% bottom 230px, left 110%

У тілі сторінки:
Створюємо div з класом traffic-light та img з класом car1 з картинкою машини.