Решение: Динамичен сайт

Ключовата идея: централизиран контрол на анимациите

Динамичният ефект на сайта се постига чрез ясно дефинирани @keyframes анимации, изнесени в началото на CSS файла и прилагани стратегически върху различни елементи. Крайните стойности често се наследяват от стандартните стилове, което прави кода по-чист и гъвкав. Комбинацията от анимации и transition-и създава усещане за плавност и професионализъм.

Как да повторите ефекта стъпка по стъпка

1. Дефинирайте анимациите в началото на CSS: SlideTop, SlideBottom, SlideIn, FillOut, Fade.
2. За SlideTop задайте начален margin-top: 50%, без да описвате крайна фаза – тя ще използва стандартните стилове.
3. Добавете SlideBottom към навигацията с отрицателен margin, за да се появява отгоре надолу.
4. Приложете SlideIn върху елементите на списъка (сиви и сини точки), като създадете леко изпреварване на сините.
5. Използвайте FillOut, за да „отдръпнете“ сивите точки и да покажете нивото на умения.
6. Добавете Fade към контейнера с име, длъжност и снимка.
7. Реализирайте responsive меню с transition, което:
   • променя ширината от 0 до 100%;
   • използва opacity за плавно появяване;
   • показва/скрива бутон (40x40px) с отделен transition.

Използвани CSS техники

• @keyframes – дефинира фазите на анимацията
• animation – прилага анимация върху елемент
• transition – плавна промяна на свойства (напр. width, opacity)
• opacity – контролира прозрачността при появяване/скриване
• margin – използван за създаване на ефект на плъзгане

Задача

Организирайте всички анимации в началото на вашия CSS файл и приложете поне три различни анимации върху различни елементи (заглавие, меню и списък), така че да изградите цялостен динамичен ефект.