ZorNet.Ru — сайт для вебмастера » HTML и CSS » Плавное появление блоков на чистом CSS

Плавное появление блоков на чистом CSS

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

Ведь наш мозг основном запрограммирован обращать внимание на движущиеся объекты. Из-за этого естественного рефлекса, чтобы замечать движение, добавление анимации на ваш сайт или в приложение является мощным способом привлечь внимание пользователей к важным областям вашего продукта и добавить интерес к вашему интерфейсу.

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

Чтобы создать эффект анимации для объектов, то здесь нужно выполнить следующие шаги. Это прописать код и под него стили, ведь все исполнено на чистом CSS.

Установочный процесс:

HTML

Код

<div class="plavnaya-animatsiya">
  <div class="peremes-hcheniya atransomas dvizheniyaUp one">
  Подниматься
  </div>

  <div class="peremes-hcheniya atransomas dvizheniyaDown two">
  Спускаться
  </div>

  <div class="peremes-hcheniya atransomas dvizheniyaLeft three">
  С левой стороны
  </div>

  <div class="peremes-hcheniya atransomas dvizheniyaRight four">
  С правой стороны
  </div>
</div>

CSS

Код

/*=== Основные стайлинга ===*/
.peremes-hcheniya {
  background: #1488b3;
  width: 115px;
  height: 85px;
  padding: 18px;
  text-align: center;
  color: #fff5f5;
  border-radius: 3px;
  float: left;
  margin: 3px;
  font-size: 14px;
  font-family: 'Arial';
  text-transform: uppercase;
}

/*=== Спусковой крючок ===*/
.atransomas {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== Необязательные задержки, измените значения здесь ===*/
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}

.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}

.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}

.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}

/*=== Animations start here ===*/
/*=== FADE IN ===*/
@-webkit-keyframes dvizheniya {
  from {
  opacity: 0;
  }

  to {
  opacity: 1;
  }
}
@keyframes dvizheniya {
  from {
  opacity: 0;
  }

  to {
  opacity: 1;
  }
}

.dvizheniya {
  -webkit-animation-name: dvizheniya;
  animation-name: dvizheniya;
}

/*=== FADE IN DOWN ===*/
@-webkit-keyframes dvizheniyaDown {
  from {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}
@keyframes dvizheniyaDown {
  from {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.dvizheniyaDown {
  -webkit-animation-name: dvizheniyaDown;
  animation-name: dvizheniyaDown;
}

/*==== FADE IN UP ===*/
@-webkit-keyframes dvizheniyaUp {
  from {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}
@keyframes dvizheniyaUp {
  from {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.dvizheniyaUp {
  -webkit-animation-name: dvizheniyaUp;
  animation-name: dvizheniyaUp;
}

/*=== FADE IN LEFT ===*/
@-webkit-keyframes dvizheniyaLeft {
  from {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}
@keyframes dvizheniyaLeft {
  from {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.dvizheniyaLeft {
  -webkit-animation-name: dvizheniyaLeft;
  animation-name: dvizheniyaLeft;
}

/*==== FADE IN RIGHT ===*/
@-webkit-keyframes dvizheniyaRight {
  from {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}
@keyframes dvizheniyaRight {
  from {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }

  to {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.dvizheniyaRight {
  -webkit-animation-name: dvizheniyaRight;
  animation-name: dvizheniyaRight;
}

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

Демонстрация

19 Сентября 2019 Загрузок: 2 Просмотров: 6518 Комментариев: (2)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: ruzkeutube 02 Февраля 2021 09:59¹ 0 Спасибо, очень помогли! Kosten 02 Февраля 2021 22:43² 0 Отлично, когда сами разобрались.