Анимация текста при наведении курсора

Сообщение **vergily** » 25 янв 2018, 17:04

Здравствуйте уважаемые форумчане. Я пока нубик в таком не легком деле ( :hi_hi_hi:

), как веб дизайн. Поэтому мой вопрос может показаться глуповатым, но всё же... Ни как не пойму: как сделать анимацию текста, чтоб при наведении курсора на текст он увеличивался в размерах, а при отводе возвращался на круги своя. Использую билдер 9 на русском). За ранее примнОго благодарен :-):

Сообщение **Alex15963** » 25 янв 2018, 18:01

Перейдите на 12 версию - сделаю проект. В 9-ой вы не откроете

Сообщение **vergily** » 25 янв 2018, 18:52

Alex15963, Считайте, что перешел) Завтра с раннего утра будет стоять 12 ;)

Сообщение **Vitamin701** » 25 янв 2018, 19:41

Свойства объекта - События - Добавить - Событие (onmouseover)-Действие(анимировать CSS3) - Цель (выбираешь свой текст) - Animation(Выбираешь нужный эффект)

Сообщение **vergily** » 25 янв 2018, 20:49

Vitamin701, Он так при отводе курсора в первоначальное состояние не возвращается :cry_ing:

Отправлено спустя 4 минуты 43 секунды:
А, ну в принципе въехал) Еще одно событие добавить надо. Ток с анимацией разобраться какую именно поставить. Всем спасибо. Просто ангельски помогли :ya_hoo_oo:

Сообщение **SuperBatya** » 26 янв 2018, 09:28

Как по мне, то лучше все делать чуть не так...
Для любого объекта, в том числе, и текста, лучше делать так:
Свойство объекта-->CSS3 анимация-->Переходы-->Добавить... Далее добавляем любой переход со своей скоростью (например как в твоем случае "Transform", шкалы X и Y: 1.5...), триггер выставляем на "Hover".
Также не забываем добавить второй переход, с триггером "(default)" и переходом таким же какой был до этого, только значения по умолчанию (например как в твоем случае "Transform", шкалы X и Y: 1.0...

Сообщение **vergily** » 26 янв 2018, 13:01

SuperBatya, Учту, попробую так. Спасибо за инфу. :co_ol:

Сообщение **Vitamin701** » 29 июл 2019, 14:00

У меня на объекте уже есть одна анимация. Хочу добавить переход при наведении мыши (transform). Но ничего не срабатывает. Срабатывает только при (background-color).
Если же удалить анимацию , тогда любые переходы работают, в том числе и который мне нужен (transform).
Помогите решить проблему ! :ny_tik:

Сообщение **spoon** » 29 июл 2019, 15:18

скидывай пример.

Сообщение **Vitamin701** » 29 июл 2019, 15:23

Пожалуйста

Отправлено спустя 51 секунду:
id - Image2

Сообщение **spoon** » 29 июл 2019, 15:28

там одни фотки, мне что сними делать?))) давай wbs с анимацией

Сообщение **Vitamin701** » 29 июл 2019, 15:32

Сорри , вот

Отправлено спустя 1 час 19 минут 2 секунды:

Отправлено спустя 2 минуты 56 секунд:
В общем разобрался я. В анимации нужно поменять fill mode с both на backwards, тогда переход работает.

Так же благодарю Gudwinn за альтернативное решение через HTML

Сообщение **spoon** » 29 июл 2019, 17:20

Вот пример.

Отправлено спустя 5 минут 35 секунд:

Vitamin701 писал(а): В анимации нужно поменять fill mode с both на backwards, тогда переход работает.

Точно)), ну метод тыка то же метод)

Сообщение **Vitamin701** » 29 июл 2019, 17:43

spoon, а у тебя какой метод ? Не разобрался...вроде как везде одинаковые парметры

Сообщение **spoon** » 29 июл 2019, 17:51

оборачиваешь иконку в div с каким нибудь классом и прописываешь этому классу анимацию. Всё дело в том, что both не завершает анимацию и поэтому не срабатывает hover.

Сообщение **Vitamin701** » 29 июл 2019, 18:22

Останусь наверное все-таки на своем методе (дотыкался) , так как с ним проще и не нужно писать ничего
В любом случае, тоже благодарю за помощь !

Сообщение **spoon** » 29 июл 2019, 18:31

Vitamin701 писал(а):Останусь наверное все-таки на своем методе

Само-собой

Кто сейчас на конференции

Добро пожаловать на форум!