css animations, которые внезапно завершаются сбоем вне ui

#html #css #css3 #анимация

Вопрос: может ли css определить, если анимация незавершена? 

 

storytime: У меня классный ui с анимированными кнопками. Они расширяются при наведении,
поэтому другие кнопки на панели  должны одновременно сжиматься. 

 

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

код с ошибкой:  

.container:hover button{
    width: calc((100% / 3) - 5%);
}
.container button:hover{
    width: calc((100% / 3) + 10%);
}  


Полный код:  



.container {
  width: 375px;
  height: 100px;
}

.container button {
  transition: .15s;
  float: left;
  height: 100%;
  border: none;
  object-fit: cover;
  width: calc(100% / 3);
}

.container:hover button {
  width: calc((100% / 3) - 5%);
}

.container button:hover {
  width: calc((100% / 3) + 10%);
}

button.green {
  background-color: #27ae60;
  color: white;
}

button.blue {
  background-color: #3498db;
  color: white;
}

button.white {
  background-color: #ecf0f1;
}

body {
  background-color: #929AAA;
}

div.container {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: calc(100vh / 4 - 50px) auto
}

  
  
  



     

Ещё один пример - Codepen
    

Ответы

Ответ 1

Идея состоит в том, чтобы сделать только один элемент, с увеличением размера при
наведении, а другие при этом должны уменьшится. Вот пример с flexbox: 



.container {
  width: 375px;
  height: 100px;
  display: flex;
}

button {
  transition: .15s;
  flex: 1;
  border: none;
}
/* you want to have 28% + 44% + 28% so it's 1 + 1.57 + 1*/
.container button:hover {
  flex: 1.57;
}

/*For styling*/
button.green {
  background-color: #27ae60;
  color: white;
}

button.blue {
  background-color: #3498db;
  color: white;
}

button.white {
  background-color: #ecf0f1;
}

body {
  background-color: #929AAA;
}

div.container {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: calc((100vh - 100px) / 2) auto
}