Как создать анимационную анимацию анимации прокрутки

Ответ 1

Вот мой первый проход. Я попытался сохранить дополнительную разметку до минимума; единственное дополнение - это обтекание текста. Стрелка создается через псевдоэлементы. Это чисто декоративное и не было бы семантическим, если бы построено из других элементов, на мой взгляд.

<a href="#" class="promo__button">
  <span>Tell me more</span>
</a>

https://jsfiddle.net/6ewvbq75/

Я старался держать код в чистоте и комментировать. Несколько важных бит:

• Вы заметите, что часть анимации воспроизводится при загрузке страницы. Это известная проблема, что вы можете сделать, это применить класс анимации при наведении. Это выглядит так же хорошо, но позволяет избежать неудобной анимации этих кнопок при загрузке страницы: https://jsfiddle.net/b5sc9xrp/

• Все анимации хранятся в ключевых кадрах в конце. on hover или on mouse over анимация применяется с присвоением, например, директивой .button:hover span. on mouse out присваивается стандартным объявлением .button span, которое немного противоречит интуиции и, следовательно, стоит упомянуть. В конце концов, нет :un-hover.

• forwards ключевое слово в назначении анимации означает, что анимация будет воспроизводиться только вперед и останавливаться там. Это ключ. Например, когда мы сдвигаем текст вправо и исчезаем, мы хотим, чтобы он оставался на последнем ключевом кадре. Без forwards анимация вернется к ключевому кадру 1.

• Я сделал элементы стрелки размером 2 пикселя. Я думаю, что он выглядит лучше и менее нервным, чем версия 1px, но это довольно простая настройка.

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

Ответ 2

Вы можете смешать css и jQuery для достижения этого эффекта (поскольку вы отметили свой вопрос с помощью jQuery).

var timeout = null;
var transitionEnd = true;

jQuery('.line').on("mouseenter", function() {
  if (!transitionEnd)
    return;

  _this = jQuery(this);

  _this.addClass("hide-text");

  timeout = setTimeout(function() {
    _this.addClass("in");
  }, 300);

  transitionEnd = false;
}).on("mouseleave", function() {
  clearTimeout(timeout);

  jQuery(this).addClass("out").one("transitionend", function() {
    transitionEnd = true;
    jQuery(this).removeClass("hide-text out in");
  });


});

.line {
  background-color: red;
  border: 1px solid;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 25px;
  height: 70px;
  line-height: 70px;
  margin: 30px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 200px;
}
.line::after {
  content: " ";
  border-top: 1px solid white;
  position: absolute;
  top: 50%;
  right: 100%;
  left: -150%;
  transition: left 0.5s, right 0.3s;
  opacity: 0;
}
.line::before {
  border-right: 1px solid white;
  border-top: 1px solid white;
  content: " ";
  height: 10px;
  position: absolute;
  right: 20%;
  top: calc(50% - 5px);
  transform: rotate(45deg) scale(0.2);
  transition: all 0.5s ease 0s;
  width: 10px;
  opacity: 0;
}
.line span,
.line.out span {
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.1s;
}
.line.hide-text span {
  opacity: 0;
}
.line.in::after {
  left: 20%;
  right: 20%;
  opacity: 1;
}
.line.in::before {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.line.out::before {
  right: -100%;
  transition-delay: 0s;
}
.line.out::after {
  left: 100%;
  right: -150%;
  transition: left 0.3s, right 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='line'>
  <span class='text'>Button Text</span>
</div>

Ответ 3

Я уверен, что кнопка не требует javascript.

Здесь структура высокого уровня только в html и css: https://jsfiddle.net/gsvcaLrt/1/

button {
  background-color: red;
  border: none;
  padding: 1rem;
  overflow: hidden;
  position: relative;
}
.arrow {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(-30px);
  transition: 0.4s;
}
button:hover .arrow {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

.text {
  visibility: visible;
  opacity: 1;
  transition: 0.4s;
  display: inline-block;
}
/* hide button on hover */
button:hover .text {
  visibility: hidden;
  opacity: 0;
  transform: translateX(30px);
}

<button>
  <span class="arrow">--></span>
  <span class="text">Hello</span>
</button>

Ответ 4

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

Возьмем следующую структуру:

<a class="promo__button exit">
  <span class="arrowleft">
     <span>*the arrow that comes from the left*</span>
  </span>
  <span class="message">
     <span>*the text*</span>
  </span>
  <span class="arrowleft">
     <span>*the arrow that disappears to the right*</span>
  </span>
</a>

то в css вы можете использовать эти 6 селекторов:

.promo__button .message span {
  //the css for the text when it is visible
}

.promo__button:hover .message span {
  //the aditional css for the text when it is faded out
}

.promo__button .arrowleft span {
  //the css for the arrow before it came in from the left (invisible)
}

.promo__button:hover .arrowleft span {
  //the aditional css to make the arrow visible 
}

.promo__button .arrowright span {
  //the css for the arrow after it went away to the right side
}

.promo__button:hover .arrowright span {
  //the aditional css to make the arrow visible 
}

теперь добавьте .promo__button * * { transition: left 0.2s, opacity, 0.2s} для всех значений, которые изменились с нормального на hover

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

.promo__button.enter .arrowright {display:none}
.promo__button.exit .arrowleft {display:none}

и использовать javascript для переключения ввода/выхода onmouseenter

Ответ 5

Я знаю это слишком поздно, но это может быть интересно. Я использовал анимацию css только после того, как использовались псевдо-классы.

body {
  font-family: "Helvetica Neue", sans-serif;
  background: #f8f8f8;
}

.promo {
  color: #fff;
  text-align: center;
}

.promo__button {
  border: 1px solid #fff;
  display: inline-block;
  position: relative;
  margin-top: 1.5em;
  font-size: 24px;
  padding: 20px 50px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  text-align: center;
  color: #fff;
  background: #E21710;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  
}

.promo__button:after {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.text {
  transform: matrix(1, 0, 0, 1, 0, 0);
  display: block;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translate(-300%, -50%);
  width: 80px;
  height: 1px;
  background: #E21710;
  display: inline-block;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.arrow:after,
.arrow:before {
  content: '';
  position: absolute;
  right: -3px;
  display: block;
  width: 20px;
  height: 1px;
  background: #E21710;
  z-index: 2;
}

.arrow:after {
  top: 7px;
  transform: rotate(-45deg);
}

.arrow:before {
  transform: rotate(45deg);
  top: -7px;
}

.promo__button:hover .text {
  transform: translateX(200%);
}

.promo__button:hover .arrow {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.promo__button:hover {
	box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.02); 
}
.promo__button:hover:after {
  transform: scaleY(1);
}

<div class="promo">
  <a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>
			<span class="text">Tell me more</span>
			<span class="arrow"></span>
  </a>

</div>