Для анимации появления текста за пределами блока можно использовать CSS свойство `overflow: hidden` для скрытия текста в пределах блока и анимацию появления с помощью свойства `transform`.
Пример CSS:
```css
.container {
width: 150px;
overflow: hidden;
}
.text {
transform: translateX(100%);
animation: slideIn 1s forwards;
}
@keyframes slideIn {
to {
transform: translateX(0);
}
}
```
Пример JavaScript для условия применения анимации:
```javascript
const container = document.querySelector('.container');
const text = document.querySelector('.text');
if (text.offsetWidth > container.offsetWidth) {
text.classList.add('text');
}
```
В данном примере, если ширина текста (`offsetWidth`) превышает ширину контейнера (`container.offsetWidth`), то к тексту добавляется класс `.text`, который запускает анимацию появления. Анимация не будет применяться к тексту, который полностью помещается в контейнере шириной до 150px.