ul{
  list-style:none;
  padding:0px;
  margin:0px;
}
ul >li >ul{
  display:none;
}
ul >li:hover >ul{
  display:block;
}

.fade_in {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}

.fade_out {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
@keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
 

<ul>
  <li>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul> 

transition: opacity . 4s ease-in-out;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul>li>ul {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

ul>li:hover>ul {
  pointer-events: all;
  opacity: 1;
}

<ul>
  <li>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

<div>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</div>

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div>ul {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    overflow: hidden;
}

div:hover>ul {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}
 

. Плавное нарастание {
 анимация: плавный переход 10 с; 
 -webkit-animation: fadeIn easy 10s; 
 -moz-анимация: fadeIn easy 10s; 
 -o-анимация: fadeIn easy 10s; 
 -ms-animation: fadeIn easy 10s; 
} @keyframes fadeIn {
 0% {
 opacity: 0; 
} 
 100% {
 непрозрачность: 1; 
} 
} 
 @ -moz-keyframes fadeIn {
 0% {
 opacity: 0; 
} 
 100% {
 непрозрачность: 1; 
} 
} 
 
 @ -webkit-keyframes fadeIn {
 0% {
 opacity: 0; 
} 
 100% {
 непрозрачность: 1; 
} 
} 
 
 @ -o-keyframes fadeIn {
 0% {
 opacity: 0; 
} 
 100% {
 непрозрачность: 1; 
} 
} 
 
 @ -ms-keyframes fadeIn {
 0% {
 opacity: 0; 
} 
 100% {
 непрозрачность: 1; 
} 
 

, исчезнет со временем перехода 10 секунд.

Прощай, мой милый зяблик.

Чтобы скрыть элемент HTML, вставьте следующий код в свой блок CSS:

.постепенное исчезновение {
 анимация: fadeOut easy 8s; 
 -webkit-animation: fadeOut easy 8s; 
 -moz-анимация: fadeOut easy 8s; 
 -o-анимация: fadeOut easy 8s; 
 -ms-animation: fadeOut easy 8s; 
} @keyframes fadeOut {
 0% {
 opacity: 1; 
} 
 100% {
 непрозрачность: 0; 
} 
} 
 @ -moz-keyframes fadeOut {
 0% {
 opacity: 1; 
} 
 100% {
 непрозрачность: 0; 
} 
} 
 
 @ -webkit-keyframes fadeOut {
 0% {
 opacity: 1; 
} 
 100% {
 непрозрачность: 0; 
} 
} 
 
 @ -o-keyframes fadeOut {
 0% {
 opacity: 1; 
} 
 100% {
 непрозрачность: 0; 
} 
} 
 
 @ -ms-keyframes fadeOut {
 0% {
 opacity: 1; 
} 
 100% {
 непрозрачность: 0; 
} 
 

Основным изменением является то, что параметры 0% (начало) имеют непрозрачность 1 (максимальное значение), а затем параметры 100% (конец) имеют непрозрачность 0 ( минимальное значение). Технически этого было бы достаточно, но изменение fadeIn на fadeOut из предыдущего примера гарантирует, что вы на простом английском языке точно знаете, что происходит.

Опять же, вам придется явно использовать код CSS в своих HTML-классах:

В этом примере птица исчезает в течение 8 секунд.

Эффекты постепенного появления / исчезновения с помощью CSS: `opacity` + CSS-delayed` visibility`

Эффекты постепенного появления / исчезновения с помощью CSS: `opacity` + CSS-delayed` visibility`

Вернуться на вступительную страницу

Это похоже на наш предыдущий тест, за исключением того, что на этот раз мы пытаемся отложить применение `visibility: hidden` с помощью чистого CSS.Мы можем сделать это с помощью свойства «transition-delay» и применить различную задержку к переходу непрозрачности (без задержки) и к переходу видимости (задержка, равная длительности перехода непрозрачности). Спасибо Роману Комарову за указание на эту технику.

Показать элемент Скрыть элемент

Фиктивное содержание: никакая живая правда не может быть сведена к приговору; таким предложением в лучшем случае был бы паспорт, дающий право на въезд в другую страну, которую вам еще предстоит узнать.И вы в конечном итоге думаете, что можете решать важные дела только окольными путями или по диагонали — почти потихоньку.

Тестовая ссылка после скрытого контента.

Как это работает

Базовый код CSS для этого примера выглядит так:

  .visible {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 2 с, линейная;
}
.скрытый {
  видимость: скрыта;
  непрозрачность: 0;
  переход: видимость 0 с 2 с, непрозрачность 2 с линейная;
}
  

При отображении элемента (путем переключения на класс visible ) мы хотим, чтобы свойство visibility: visible сработало мгновенно, поэтому можно перейти только к свойству непрозрачности . И при скрытии элемента (путем переключения на класс hidden ) мы хотим отложить объявление visibility: hidden , чтобы мы могли сначала увидеть переход постепенного исчезновения. Мы делаем это, объявляя переход для свойства visibility с длительностью 0 секунд и задержкой.

Как удалить скрытый элемент из потока?

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

• display: none не работает, потому что применяется мгновенно, и попытка отложить его, как мы делали с видимостью , не сработает;
• позиция: абсолютный имеет ту же проблему;
• это не идеально, но мы можем использовать margin-top (он может быть перенесен и, следовательно, отложен).

Чтобы использовать margin-top для скрытия элемента, нам нужна немного более богатая структура HTML:

  

  
… 

  

И наш код CSS становится более сложным:

 .видимый,
.скрытый {
  переполнение: скрыто;
  / * Этот контейнер не должен иметь отступов, границ и т. Д. * /
}
.visible {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 2 с, линейная;
}
.скрытый {
  видимость: скрыта;
  непрозрачность: 0;
  переход: видимость 0 с 2 с, непрозрачность 2 с линейная;
}
.visible> div,
.hidden> div {
  / * Поместите сюда любые отступы, границы, минимальную высоту и т. Д. * /
}
.hidden> div {
  margin-top: -10000 пикселей;
  переход: margin-top 0s 2s;
}
  

Появление … и исчезновение с переходами CSS

Я сделал несколько сайтов, у которых есть то, что выглядит как всплывающее окно — на самом деле это div с видимостью: скрытый, и когда вы щелкаете где-нибудь, он становится видимым.Я также использовал непрозрачность, чтобы ее можно было постепенно увеличивать и уменьшать. Но до этой недели постепенное исчезновение не работало.

Вот мой код:

  .popup {
  видимость: скрыта;
  непрозрачность: 0;
  переход: непрозрачность 250 мс замедление;
}

.popup.show {
  видимость: видимая;
  непрозрачность: 1;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Также есть некоторый JavaScript, поэтому, когда вы нажимаете кнопку, он добавляет класс шоу во всплывающее окно.

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

Так что все работает? Нет. Он красиво исчезает, но исчезает в мгновение ока. Причина в том, что когда добавляется класс show, он сразу же делает его видимым, но для изменения непрозрачности с 0 на 1 требуется 250 мс. Именно этого мы и хотим.

Но поскольку нет перехода по видимости, когда вы удаляете класс, он сразу становится скрытым, а затем требуется 250 мс, чтобы изменить непрозрачность с 1 на 0. Вы просто не можете его увидеть, потому что он скрыт.

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

  .popup {
  видимость: скрыта;
  непрозрачность: 0;
  переход: непрозрачность 250 мс замедление, видимость 0 мс замедление 250 мс;
}

.popup.show {
  видимость: видимая;
  непрозрачность: 1;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Итак, теперь, когда мы удаляем класс show, он меняет непрозрачность с 1 на 0 за 250 мс, а затем сразу же устанавливает видимость на скрытую.А при исчезновении он меняет непрозрачность от 0 до 1 за 25 мс, а затем сразу же устанавливает видимость на видимую. Это означает, что теперь он исчезает, но не исчезает …

Решение состоит в том, чтобы воспользоваться тем фактом, что переходы в классе show происходят при постепенном появлении, а переходы во всплывающем классе происходят при постепенном появлении и исчезновении. Мы можем добавить строку в класс шоу:

  .popup {
  видимость: скрыта;
  непрозрачность: 0;
  переход: непрозрачность 250 мс замедление, видимость 0 мс замедление 250 мс;
}

.popup.show {
  видимость: видимая;
  непрозрачность: 1;
  задержка перехода: 0 мс;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Поскольку .popup.show имеет большую специфичность, он переопределяет все, что находится в .popup. Вот как мы делаем его видимым и непрозрачным 1. Следовательно, он также отменяет задержку перехода на видимость. Таким образом, когда добавлен класс шоу, переход становится:

  переход: непрозрачность 250 мс легкость начала, видимость 0 мс легкость 0 мс;
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Таким образом, когда добавляется класс show, он сразу становится видимым, а затем меняет непрозрачность с 0 на 1 за 25 мс.

И, наконец, у нас есть то, что постепенно исчезает и появляется!

Конечно, вы также можете перезаписать весь переход с помощью:

  .popup {
  видимость: скрыта;
  непрозрачность: 0;
  переход: непрозрачность 250 мс замедление, видимость 0 мс замедление 250 мс;
}

.popup.show {
  видимость: видимая;
  непрозрачность: 1;
  переход: непрозрачность 250 мс, плавность 0 мс, видимость 0 мс;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Но обычно вы не хотите писать одно и то же в нескольких местах: если вы решили, что переход был слишком медленным, вам нужно изменить 250 мс в трех местах.Но в предыдущем коде вам нужно было изменить его только в двух местах.

переходов CSS: анимация появления и исчезновения CSS

Переходы CSS позволяют элементам HTML на веб-странице постепенно переходить из одного состояния в другое. Популярным сценарием является определение быстрого набора свойств, обеспечивающих чистую анимацию визуальных элементов вашей веб-страницы.

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

Как работают переходы CSS

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

• opacity : устанавливает визуальную прозрачность элемента с допустимыми значениями в диапазоне от 0,0 ( полностью прозрачный) до 1.0 (полностью непрозрачный).
• переход : это сокращенная версия множества различных свойств перехода, где 0.25 с. — продолжительность эффекта анимации, в данном случае 0,25 секунды, все определяют свойство, которое будет анимировано (в данном случае все свойства элемента), а легкость входа задает кривую скорости для анимации, что в данном случае означает, что анимация будет ускоряться в середине анимации и замедляться до ее завершения.

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

CSS Fade Out Transition

Для перехода с постепенным исчезновением давайте начнем с базового элемента div :

И некоторого стиля, чтобы отличить наш новый элемент от остальной части страницы:

 дел.коробка {
 ширина: 100 пикселей; 
 высота: 100 пикселей; 
 цвет фона: красный; 
 курсор: указатель; 
} 

Приведенный выше код CSS стилизует наш новый элемент с классом box , делая его размером 100×100 пикселей с красным фоном. курсор: указатель устанавливает курсор мыши на изображение указателя, поэтому мы знаем, что наш новый контейнер является интерактивным элементом на странице.

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

 div.коробка {
 ширина: 100 пикселей; 
 высота: 100 пикселей; 
 цвет фона: красный; 
 непрозрачность: 1,00; 
 курсор: указатель; 
 -webkit-transition: 0,25 с. 
 -moz-transition: 0,25 с для всех выходов; 
 -o-переход: 0,25 с для всех выходов; 
 
 transition: 0,25 с для всех выходов; 
} 
 div.box:active {
 opacity: 0.00; 
} 
 

Этот фрагмент CSS использует свойства transition и opacity , которые мы рассмотрели выше, что позволяет элементу box исчезнуть через 1/4 секунды.

CSS Fade In Transition

Вы можете добиться противоположного, поменяв местами уровни непрозрачности между элементом box и связанным с ним селектором : active , что приведет к постепенному переходу с помощью CSS:

 div.box {
 width : 100 пикселей; 
 высота: 100 пикселей; 
 цвет фона: красный; 
 непрозрачность: 0,00; 
 курсор: указатель; 
 -webkit-transition: 0,25 с. 
 -moz-transition: 0,25 с для всех выходов; 
 -o-transition: 0,25 с для всех выходов; 
 
 transition: 0.25-е ​​годы - легкость входа и выхода; 
} 
 div.box:active {
 opacity: 1,00; 
} 
 

Итак, теперь элемент не исчезает при щелчке, а при щелчке.

Заключение

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

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

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

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

Основная идея — уменьшить непрозрачность элемента от 1 (что означает полностью непрозрачный) до 0 (что означает полностью прозрачный) в чтобы скрыть элемент.И действительно элемент с непрозрачностью : 0 выглядит таким же невидимым, как элемент с видимостью : скрыт . Однако ведет себя иначе. Элемент с непрозрачностью : 0 все еще получает события и, например, реагирует, когда пользователь нажимает на его ссылки. С другой стороны ссылки покрытые полностью прозрачным элементом не работают, хотя полностью видно.

Следующий первый пример иллюстрирует это.

<стиль> .c0 {непрозрачность: 0; переход: непрозрачность 1 с; } .c0: hover {opacity: 1} Хорошо рабочий образец Наведите указатель мыши на линию над этой линией

Красиво рабочий образец Наведите указатель мыши на линию Над этой линией

Второй пример теперь показывает проблему с этой техникой: Здесь вы видите обычную ссылку, но проблема в том, что она не реагирует на нажатие.(Если вы думаете, что этот пример немного построен, есть более реалистичный, но и более сложный пример ниже.)

Пример мешающего ссылки < / div> Не работает ссылка http://www.taccgl.org

Образец мешающего со ссылкой

Проблема в том, что элемент c1 закрывает ссылку. Это невидимо из-за непрозрачности : 0 , но по-прежнему получает щелчки мыши. Таким образом, эти щелчки мыши не переходят к самой ссылке, и, следовательно, ссылка не работает. Добавив цвет фона и используя непрозрачность : 0.5 сразу становится понятно, что происходит:

Пример мешающего со ссылкой < div> Не работает ссылка http://www.taccgl.org

Образец мешающего со ссылкой

Более реалистичный пример: всплывающее меню

Ниже показан более реалистичный пример всплывающего меню. При наведении указателя мыши на кнопку меню появляется меню. Меню появляется и исчезает с помощью перехода непрозрачности. Вы заметите, что ссылка под кнопкой меню не работает.Это вызвано моим меню, которое есть (хотя и полностью прозрачное). из-за непрозрачности : 0 и, следовательно, невидимый) и получает щелчки мышью, предназначенные для ссылки.

Наведите курсор на кнопку меню Это пример меню с некоторыми ссылками http://www.taccgl.org Не работает ссылка taccgl.org «> http://www.taccgl.org

Кнопка меню Наведите здесь

Обходной путь: объединение прозрачности и видимости перехода CSS

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

Обратите внимание, однако, что пока работает визуальный эффект затухания, элемент меню должен быть видимым, иначе эффект будет не быть видимым. Таким образом, при постепенном появлении элемент должен стать видимым. сразу при затемнении он должен стать видимым только после завершения перехода непрозрачности. Именно такое поведение указывается с помощью transition: visibility 1s. Подробное описание видимости переходов css и как совместить это с визуальными эффектами, такими как opacity и другие видят видимость перехода CSS статья.

Наведите курсор на кнопку меню Это пример меню с некоторыми ссылки http://www.taccgl.org < / div> Сейчас работает ссылка http://www.taccgl.org

Кнопка меню Наведите здесь

Заключение

Использование css transition только для непрозрачности для постепенного исчезновения элемента приводит к проблеме что ссылки на выцветшем элементе остаются активными, а ссылки на элементы закрыты потускневшим элементом не работают. Мы привели примеры такого поведения и обходной путь, использующий прозрачность перехода css и видимость перехода css.

WebGL ™ является товарным знаком Khronos Group Inc.

fade In / fade out с CSS Transition

Легко сделать fade in / fade out effect с чистым CSS , что означает отсутствие необходимости в каком-либо JavaScript или jQuery . Но этот fade in / out effect работает только в последних версиях браузеров, вот список поддерживаемых браузеров WebKit :

Список браузеров:

1. Chrome 1.0
2. Firefox (Gecko) 4.0 (2)
3. Internet Explorer 10
4. Opera 10.5
5. Safari (WebKit) 3.2

Чтобы сделать его совместимым со всем браузером, вы должны использовать jQuery или JavaScript в jQuery это просто с помощью функций fadein () и fadeout () . Есть несколько свойств перехода , которые мы используем в этом эффекте постепенного появления / исчезновения эффекта .

Список свойств перехода CSS:

1. свойство перехода
2. продолжительность перехода
3. функция времени перехода
4. задержка перехода

В этом примере мы используем эти четыре свойства, которые влияют на Крышка .Как вы можете видеть в этом примере, я использовал другое свойство перехода и продолжительность перехода для разных браузеров, чтобы эффект постепенного появления / исчезновения остался в указанных выше браузерах. Вот HTML и часть CSS , вы также можете найти живую демонстрацию.

 

    

        
 На главную 
        
 О нас 
        
 Портфойло 
        
 Сервировки 
        
 Свяжитесь с нами 
    

 

 #container {
ширина: 200 пикселей;
}
#container ul {
стиль списка: нет;
}
#container li {
семейство шрифтов: Verdana;
размер шрифта: 13 пикселей;
высота: 35 пикселей;
высота строки: 35 пикселей;
дисплей: блок;
свойство-переход: фон, цвет;
продолжительность перехода: 1 с;
временная функция перехода: легкость выхода;
-webkit-transition-property: фон, цвет;
-webkit-transition-duration: 1 с;
-moz-transition-property: фон, цвет;
-moz-transition-duration: 1 с;
-ms-transition-property: фон, цвет;
-ms-transition-duration: 1 с;
-o-transition-property: фон, цвет;
-o-transition-duration: 1 с;
фон: #fff;
цвет: # 333;
font-weight: жирный;
отступ: 0 10 пикселей;
}
#container li: hover {
свойство-переход: фон, цвет;
продолжительность перехода: 1 с;
временная функция перехода: легкость выхода;
-webkit-transition-property: фон, цвет;
-webkit-transition-duration: 1 с;
-moz-transition-property: фон, цвет;
-moz-transition-duration: 1 с;
-ms-transition-property: фон, цвет;
-ms-transition-duration: 1 с;
-o-transition-property: фон, цвет;
-o-transition-duration: 1 с;
фон: # 71A571;
цвет: #fff;
}


 

Как создать эффект плавного появления при загрузке страницы с помощью CSS?

Как создать эффект плавного появления при загрузке страницы с помощью CSS?

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

Метод 1. Использование свойства анимации CSS: Анимация CSS определяется двумя ключевыми кадрами. Один с непрозрачностью, установленной на 0, другой с непрозрачностью, установленной на 1. Когда тип анимации установлен на легкость, анимация плавно исчезает на странице. Это свойство применяется к тегу body. Всякий раз, когда страница загружается, эта анимация будет воспроизводиться, и страница будет казаться постепенно увеличивающейся. Время постепенного появления может быть установлено в свойстве анимации.

Синтаксис:

тело { анимация: fadeInAnimation easy 3s количество итераций анимации: 1; animation-fill-mode: вперед; } @keyframes fadeInAnimation { 0% { непрозрачность: 0; } 100% { непрозрачность: 1; } }

Пример:

8 03 7 7 7 html < head > < title > Как создать эффект плавного появления при загрузке страницы с помощью CSS title > < style > body { animation: fadeInAnimation easy количество итераций анимации: 1; animation-fill-mode: вперед; } @keyframes fadeInAnimation { 0% { непрозрачность: 0; } 100% { непрозрачность: 1; } } стиль > голова > корпус > < h2 style = "цвет: зеленый" > GeeksForGeeks h > < b > Как создать эффект плавного появления при загрузке страницы с помощью CSS < / b > 9 0058 < p > Эта страница исчезнет после загрузки p > body > html >

Выход:

Метод 2: Использование свойства перехода и настройки непрозрачность до 1, когда тело загружено: В этом методе для тела может быть изначально задана непрозрачность 0, а свойство перехода используется для анимации этого свойства при его изменении. Когда страница загружается, непрозрачность устанавливается на 1 с помощью события onload. Из-за свойства перехода изменение непрозрачности теперь будет казаться исчезающим на странице. Время плавного появления можно установить в свойстве перехода.

Синтаксис:

тело { непрозрачность: 0; переход: непрозрачность 5 с; }

Пример:

< html 03 03 голова > < title > Как создать эффект плавного появления при загрузке страницы с помощью CSS название > < стиль > тело { непрозрачность: 0; переход: непрозрачность 3 с; } стиль > головка > < корпус под нагрузкой = "документ.body.style.opacity = '1' " > < h2 style = " цвет: зеленый " > GeeksForGeeks h2 > < b > Как создать эффект плавного появления при загрузке страницы с использованием CSS b > < p > Эта страница исчезнет с после загрузки 9005 7 p > корпус > html >

009 Выход:
Читатель
Не прекращайте учиться сейчас.

No related posts.