0

Не работает переход. При наведениии на слово "Анимация" оно должно стать больше и немного отодвинуть тень.

.font-example-text { font-family: Snell Roundhand, cursive;
text-align: center;
font-size: 20px; }
.text-animation { text-align: center; 
text-shadow: 2px 2px 2px black;
transition: 2s; }
.animation-text:hover { font-size: 25px;
text-shadow: 3px 3px 2px black; }
<p class="font-example-text">Шрифты</p>
    <p><span style="text-decoration: overline;">Линия над текстом</span><br><span style="text-decoration: underline;">Линия под текстом</span><br><span style="text-decoration: line-through;">Зачеркнутый текст</span><br><span style="text-shadow: 5px 5px 2px black;">Текст с тенью</span><br><span style="text-shadow: 1px 1px 2px red, -1px -1px 2px red, -1px 1px 2px red, 1px -1px 2px red;">Текст с красной подсветкой</span><br><span style="text-shadow: 2px 2px 2px red, -2px -2px 2px blue, -2px 2px 2px green, 2px -2px 2px yellow; color: white;">Текст с немного странной разноцветной подсветкой</span><br><span style="letter-spacing: 5px;">Увеличение отступа между буквами</span><br><span style="word-spacing: 10px;">Увеличение пробелов</span><br><span style="font-style: oblique;">Наклоненный шрифт</span><br><span style="font-weight: 900;">Жирный шрифт</span></p>
    <p class="text-animation">Анимация</p>

1

1 ответ 1

2

А сравни-ка имена классов:

.animation-text:hover
 <p class="text-animation">Анимация</p>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.