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

Для добавления анимации, чтобы текст появлялся постепенно, вы можете использовать CSS свойство `opacity` и плавно изменять его значение. 

Пример:
HTML:
```
<p id="myText">Текст, который появится постепенно</p>
<button onclick="fadeIn()">Показать текст</button>
```

CSS:
```
#myText {
  opacity: 0;
  transition: opacity 1s ease;
}
```

JavaScript:
```
function fadeIn() {
  var element = document.getElementById("myText");
  element.style.opacity = 1;
}
```

По клику на кнопку будет запускаться функция `fadeIn()`, которая плавно изменит значение `opacity` элемента текста на 1, делая его видимым.

---

Для изменения кода таким образом, чтобы при клике на кнопку плавно увеличивалась высота желтого блока, можно использовать CSS свойство `height` и плавно изменять его значение.

Пример:
HTML:
```
<div id="yellowBlock">Показать все</div>
<button onclick="toggleHeight()">Показать/скрыть текст</button>
```

CSS:
```
#yellowBlock {
  height: 20px;
  overflow: hidden;
  transition: height 1s ease;
}
```

JavaScript:
```
function toggleHeight() {
  var element = document.getElementById("yellowBlock");
  if (element.style.height === "20px") {
    element.style.height = "auto";
  } else {
    element.style.height = "20px";
  }
}
```

По клику на кнопку будет запускаться функция `toggleHeight()`, которая проверяет текущее значение свойства `height` у элемента `yellowBlock`. Если значение равно `"20px"`, то высота изменится на `"auto"` для плавного показа всего текста. Если значение уже равно `"auto"`, то высота изменится на `"20px"` для плавного скрытия текста.

overflow: visible; можно удалить.