Свойство transition-property в CSS используется для указания, какие свойства элемента должны анимироваться при применении переходов (transitions).

Это свойство является частью CSS-transitions, которые позволяют создавать плавные переходы между состояниями элемента.


Made in HTML/CSS

Свойство transition в CSS позволяет создать плавные переходы между состояниями элементов при изменении их свойств.

Оно объединяет в себе несколько отдельных свойств, таких как transition-property, transition-duration, transition-timing-function и transition-delay.

Это свойство упрощает определение анимации, делая код более компактным и читабельным.


Made in HTML/CSS

Свойство transition-timing-function в CSS определяет скорость изменения свойства в процессе перехода (transition).

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

Возможны значения:

ease – Переход начинается медленно, резко ускоряется, а затем постепенно замедляется к концу (по умолчанию).
ease-in – Переход начинается медленно, ускоряется к концу.
ease-out – Переход начинается быстро, замедляется к концу.
ease-in-out – Переход начинается медленно, постепенно ускоряется, а затем постепенно замедляется к концу.
linear – Переход начинается и заканчивается с одинаковой скоростью.
cubic-bezier – Скорость перехода задается в виде кривой Безье.


Made in HTML/CSS

Свойство transition-delay в CSS используется для установки задержки перед началом перехода (transition). Это позволяет контролировать время, в течение которого анимация не будет запускаться после изменения свойства элемента.

Задержка может быть полезна для синхронизации анимаций или для создания пауз перед началом эффекта.


Made in HTML/CSS

CSS-стиль transform используется для изменения размера, положения и формы элемента на веб-странице.

Он позволяет применять трансформации, такие как перемещение, вращение, масштабирование и искажение.

CSS-стиль transform-origin определяет точку, относительно которой будут применяться трансформации (например, вращение, масштабирование) для элемента.

По умолчанию эта точка располагается в центре элемента, но ее можно изменять, чтобы настроить, как будет происходить трансформация.

CSS-правило @keyframes используется для создания анимаций.

Оно позволяет определять последовательность состояний CSS в течение времени, описывая, как элемент будет изменяться на протяжении анимации.

В этом примере элемент с классом box будет анимироваться: он будет увеличиваться в размере и менять цвет от красного до желтого, а затем обратно к синему, выполняя этот цикл бесконечно в течение 2 секунд. Код 👆

Свойство animation в CSS является сокращенной записью, которое позволяет одновременно задавать несколько параметров для анимации, таких как имя анимации, длительность, временные функции, задержку, количество итераций и режим заполнения.

Это позволяет более компактно и удобно настраивать анимации.

Свойство animation-duration в CSS используется для указания времени, в течение которого выполняется анимация.

Оно определяет, как долго будет длиться одна итерация анимации, которую вы задали с помощью @keyframes.

Свойство animation-name в CSS используется для указания имени анимации, которая была определена с помощью правила @keyframes.

Оно является частью более широкого набора свойств анимации, позволяя вам управлять тем, какая анимация будет применена к элементу.

Свойство animation-timing-function в CSS используется для определения темпа изменения анимации.

Оно позволяет вам задавать, как будет изменяться скорость анимации в течение её выполнения.

Свойство animation-delay в CSS используется для задания времени, по истечении которого анимация начнет выполняться после того, как элемент будет отображен.

Это позволяет создать задержку перед началом анимации, что может быть полезно для создания различных визуальных эффектов.

Свойство animation-fill-mode в CSS определяет, как анимация должна применяться к элементу до её первого ключевого кадра (перед началом анимации) и после завершения анимации.

Это свойство позволяет контролировать вид элемента до, во время и после анимации, что может быть полезно для создания более сложных визуальных эффектов.

Свойство animation-play-state в CSS используется для управления состоянием анимации.

С его помощью вы можете приостанавливать и возобновлять анимации, что полезно для реализации интерактивных эффектов и управления анимацией в зависимости от действий пользователя.

Made in HTML/CSS

Проект: Стильные часы.

Часть 1: - HTML создает структуру для отображения времени и даты в центре экрана.

Для того чтобы в будущем брать данные по дате и времени с js, нам надо добавить {{ }}

Made in HTML/CSS

Проект: Стильные часы. ФИНАЛ

Часть 3: - JavaScript использует Vue.js для динамического обновления времени и даты каждую секунду, а также добавляет необходимые нули к числовым значениям для правильного отображения.

Таким образом, у нас получается готовый проект: стильные часы, которые динамически обновляют и время и дату

Made in HTML/CSS

2 проект: Слайдер.

1 часть: html:
Разберем подробнее:

1. <div class="container">: Обертывающий блок для всего слайдера.
2. <div class="slider">: Блок, который содержит сами карточки.
3. <div class="card">: Каждая карточка содержит изображение и заголовок.
4. <img src="ссылка на изображение" alt="" />: Здесь будет изображение
5. <h1>Made in HTML/CSS</h1>: Заголовок внутри карточки.

В итоге, это карточки с изображениями и текстом, которые можно использовать в слайдере.

Made in HTML/CSS