Как добавить анимацию в готовые табы?

Question

[codymaverick]

Есть вот такие готовые табы . Как к ним добавить анимацию чтобы содержимое табов появлялось плавно?

Answer 1

[Roman Shcherbokov]

По простому как то так

.tabs-content .content {
  padding: 10px;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
}
.tabs-content .content.active {
  opacity: 1;
  position: relative;
}

Answer 2

[Рюрик Ростиславич]

transition

Comments

[codymaverick]

Если прописать в стилях transition для блоков, в которых находится содержимое табов, то оно не работает.

Answer 3

[Егор Живагин]

transition Не применяется, увы, к св-ву display . Я бы переделал так:

.content {
z-index: 0;
opacity: 0;
transition: all 0.3s;
}
.content.active{
z-index: 1;
opacity: 1;
}