ZorNet.Ru — сайт для вебмастера » HTML и CSS » Восемь простых примеров анимации на CSS3

Восемь простых примеров анимации на CSS3

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

Здесь собрана коллекция классных эффектов CSS, чтобы помочь вам изучить подробные детали, чтобы вы могли использовать их для создания более красивых веб сайтов. Сама анимация может позволить веб мастеру выполнять анимальный по сложности эффект, а не переходы CSS. Ключевыми являются ключевые слова. Правило @keyframes разрешает выставлять анимации с использованием подобранных кадров, то есть, будет описывать визуально сам объект в заданное время. Но здесь немного по другому, так как мы по умолчанию задаем объекту тот или иной трюк на эффект, что можно из восьми выбрать себе, с последствием установки на интернет ресурс.

Хотя в наши дни все используют анимацию CSS3 в мобильных устройствах, многие из них не делают это правильно. Есть лучшие практики, где необходимо учитывать, которые постоянно и значительно игнорируются. Это происходит главным образом потому, что по-прежнему остаются люди, что действительно не понимают реальных причин, эти методы существуют и которые так энергично поддерживаются.

Приступаем к установке:

HTML

Код

<div class="streamiocused-1">Наведите</div>
<div class="redibledates">Появление</div>
<div class="bestsidea">Свинг</div>
<div class="lecodenamed">Затухание</div>
<div class="somescussion">Увеличение</div>
<div class="ankodacosm">Уменьшение</div>
<div class="riousumechan">Вращение</div>

CSS

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

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

2. Представленный выше HTML создавался под демонстрацию, что возможно пригодится при создание сайта или оригинальной страницы.

3. Первый стиль идет как основа, он задает размер объекта, также описание внутри, а точнее ключевого слова и так далее.

Код

body > div {
  margin: 55px 55px;
  width: 190px;
  height: 150px;
  background: #4b5b79;
  color: #efeded;
  font-family: Roboto;
  font-weight: 400;
  font-size: 1.5em;
  text-align: center;
  line-height: 145px;
  transition: all 0.3s ease;
  cursor:pointer;
}
/*Вариант Навидите № 1*/
.streamiocused-1:hover {
  background:#708abb;
}

/*Вариант Появление № 2*/
.redibledates:hover {
  box-shadow: inset 0 0 0 15px #062b6f;
}

/*Вариант Свинг № 3*/
@-webkit-keyframes swing {
  15% {
  -webkit-transform: translateX(9px);
  transform: translateX(9px);
  }
  30% {
  -webkit-transform: translateX(-9px);
  transform: translateX(-9px);
  }
  40% {
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
  }
  50% {
  -webkit-transform: translateX(-6px);
  transform: translateX(-6px);
  }
  65% {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
}

@keyframes swing {
  15% {
  -webkit-transform: translateX(9px);
  transform: translateX(9px);
  }
  30% {
  -webkit-transform: translateX(-9px);
  transform: translateX(-9px);
  }
  40% {
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
  }
  50% {
  -webkit-transform: translateX(-6px);
  transform: translateX(-6px);
  }
  65% {
  -webkit-transform: translateX(3px);
  transform: translateX(3px);
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
}

.bestsidea:hover {
  -webkit-animation: swing 0.7s ease;
  animation: swing 0.7s ease;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*Вариант Затухание № 4*/
.lecodenamed {
  opacity: 1;
}
.lecodenamed:hover {
  opacity: 0.7;
}

/*Вариант Увеличение № 5*/
.somescussion:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

/*Вариант Уменьшение № 6*/
.ankodacosm:hover {
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

/*Вариант Трансформация № 7*/
.kespeare:hover {
  border-radius: 68%;
}

/*Вариант Вращение № 8*/
.riousumechan:hover {
  -webkit-transform: rotateZ(30deg);
  -ms-transform: rotateZ(30deg);
  transform: rotateZ(30deg);
}

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

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

28 Июля 2018 Просмотров: 1196 Комментариев: (0)

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

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

Kosten

Комментарии: 0