CSS переход: как производить этот эффект (соединительные переходы)

Question

https://jsfiddle.net/hak1e33n/1/

HTML

<a href="#"> 
     <div class="contact-button"> 
      <div class="contact-button-text"> 
       Linkedin 
      </div> 
      <div class="block-1b">L</div> 
      <div class="block-2b">I</div> 
      <div class="block-3b">N</div> 
      <div class="block-4b">K</div> 
      <div class="block-5b">E</div> 
      <div class="block-6b">D</div> 
      <div class="block-7b">I</div> 
      <div class="block-8b">N</div> 
     </div> 
     </a> 

CSS

.block-1b, 
.block-2b, 
.block-3b, 
.block-4b, 
.block-5b, 
.block-6b, 
.block-7b, 
.block-8b { 
    color: #fff; 
    font-family: 'quicksand', sans-serif; 
    text-align: center; 
    line-height: 50px; 
    width: 20%; 
    height: 50px; 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #506989; 
    transform-origin: top; 
    transform: rotateX(-90deg); 
    transition: .5s; 
} 

.contact-button { 
    width: 200px; 
    height: 50px; 
    border: 1px solid #333; 
    margin: 0 auto; 
    z-index: 2; 
    position: relative; 
    overflow: hidden; 
} 

.contact-button-text { 
    color: #333; 
    font-family: 'quicksand', sans-serif; 
    text-align: center; 
    line-height: 50px; 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 




.block-1b { 
    width: 25px; 
} 


.block-2b { 
    width: 25px; 
    left: 25px; 
} 


.block-3b { 
    width: 25px; 
    left: 50px; 
} 


.block-4b { 
    width: 25px; 
    left: 75px; 
} 


.block-5b { 
    width: 25px; 
    left: 100px; 
} 


.block-6b { 
    width: 25px; 
    left: 125px; 
} 


.block-7b { 
    width: 25px; 
    left: 150px; 
} 

.block-8b { 
    width: 25px; 
    left: 175px; 
} 
.contact-button:hover .block-1b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
} 

.contact-button:hover .block-2b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .1s; 
} 

.contact-button:hover .block-3b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .2s; 
} 

.contact-button:hover .block-4b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .3s; 
} 

.contact-button:hover .block-5b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .4s; 
} 

.contact-button:hover .block-6b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .5s; 
} 

.contact-button:hover .block-7b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .6s; 
} 

.contact-button:hover .block-8b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .7s; 
} 

---

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

Вы можете увидеть эффект, я хочу, чтобы произвести здесь: https://jsfiddle.net/6e9jzhtw/

---

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

-45deg 45deg 0deg

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

Спасибо.

Answer 1

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

A transition Используется для управления скоростью при изменении (конкретных, не все) Свойства css.

Это то, что вы, кажется, хотят для :hover включения/выключения произойдет

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

Теперь, почему я сказал, что вам нужны оба? Кажется, вы хотите, чтобы начать/остановить эффект на :hover основного элемента (кнопки), обычно это идеальный кандидат на переход. «Catflap» - более сложная последовательность состояний, поэтому это (по дизайну) квалифицируется как анимация.

Для того, чтобы эти два сотрудничать, вы должны определить «состояние, как вы хотите и без :hover», так что вам придется что-то вроде

.contact-button [class*=block-] { 
    /* .. removed style properties for clarity */ 
    transform: rotateX(-90deg); 
    transition: transform .2s ease-in-out, 
       background-color .3s ease-out; 
} 
.contact-button:hover [class*=block-] { 
    transform: rotateX(0); 
    background-color: #6b8fbb; 
} 

ПРИМЕЧАНИЕ: Я очень ленивый разработчик, и вместо определения .block-1b, .., .block-8b я просто сказал все элементы с подобным, содержащие block-, этот вид attribute selectors знает, что он медленный (хотя, вероятно, он очень низкий в списках проблем для этой демонстрации).

Это даст очень простой переход, обеспечивающий основной эффект «падения». Так что теперь нам нужно немного задержать его для каждого block-.

.contact-button [class*=block-]:nth-of-type(8n+1) { 
    /* intentionally left "blank" */ 
} 

.contact-button [class*=block-]:nth-of-type(8n+2) { 
    transition-delay: .05s; 
} 

/* ...etc up to nth-of-type(8n+8) */ 

Покидая transition-delay первого элемента, чтобы быть по умолчанию (который не является без задержки), мы должны влиять на все остальные, я хотел бы использовать nth-child и nth-of-type для этого.

Для ясности я переименовал первый элемент из <div> в <span> с единственной целью, чтобы быть в состоянии использовать nth-of-type (который соответствует типу элемента)

нормально, так что теперь переход делается на :hover и каждая плитка будет «падать» чуть позже, чем раньше.

Затем нам нужно обратиться к «catflap». Как я уже говорил выше, это кандидат на анимацию (как вы уже выяснили), поэтому нам нужно добавить анимацию. Я хотел бы начать анимацию, как только я узнаю, что переход завершен, к сожалению, это должно быть сделано вручную (или javascript, который я стараюсь избегать уравнения, поскольку вы угрожали использовать jQuery ..).

Мы должны выбрать задержку, которая кажется правильным, для меня это было похоже. 15 с (150 мс) было хорошим значением, вы можете по-другому ощущать это.

Итак, мы добавим animation-delay ко всем nth-of-type правил

.contact-button [class*=block-]:nth-of-type(8n+1) { 
    animation-delay: .15s; 
} 

.contact-button [class*=block-]:nth-of-type(8n+2) { 
    transition-delay: .05s; 
    animation-delay: .2s; 
} 

/* ...etc up to nth-of-type(8n+8) */ 

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

.contact-button [class*=block-] { 
    /* .. removed style properties for clarity */ 
    transform: rotateX(-90deg); 
    transition: transform .2s ease-in-out, 
       background-color .3s ease-out; 
    animation-play-state: paused; 
} 

.contact-button:hover [class*=block-] { 
    transform: rotateX(0); 
    background-color: #6b8fbb; 
    animation: catflap 2s; 
    animation-play-state: running; 
} 

All of this combined leads to the following demo. В котором я также взял на себя смелость сделать «catflap» немного более естественным, заставив его качаться меньше каждого хода.

---

Теперь вы, наверное, интересно, почему я первый утверждал, что ленивый разработчик и все же написал такие сложные CSS-селекторы. Ну, честно говоря, я бы использовал что-то вроде .contact-button:hover :nth-of-type(8n+3) и никогда не потрудился с классами, так как я бы не контролировал анимацию/переход в этих правилах. Я бы по-прежнему использовал класс для управления ими, но один и тот же для всех, например. .contact-button:hover .block, которого будет достаточно.