Fade In Out с эффектом зависания

Мне нужно оба изображения (призрак & бабочка), чтобы иметь эффект выцветания. Когда я наводил на первое изображение (призрак), мне нужен какой-то текст, чтобы выскочить. Мне удалось это сделать.Fade In Out с эффектом зависания

Однако, когда я применил переход к анимации перехода на оба изображения, текст первого изображения (призрак) больше не появляется.

Второе изображение (бабочка) должно иметь тот же эффект, что и первое изображение; которые являются эффектом выцветания и зависания.

Это образец, который мне удалось сделать из JSFIDDLE

Вот увядание в из перехода, который я пытался экспериментировать с:

.tooltip-wrap{ 
    -webkit-animation:fadeInOut 5s; 
    opacity:0; 
    -moz-animation-delay: 32s; 
    -webkit-animation-delay: 32s; 
    -o-animation-delay: 32s; 
    animation-delay: 32s; 
}

Кроме того, мне нужно оба изображения, чтобы быть на вершине друг друга. После того, как первое изображение исчезнет, второе изображение должно исчезнуть в том же положении (перекрытие).

Большое спасибо заранее.

источник

2015-06-17 fxrxh

Кроме того, мне нужно, чтобы оба изображения были друг на друга. После того, как первое изображение исчезнет, второе изображение должно исчезнуть в том же положении (перекрытие).

Для этого вы можете просто установить второе изображение на дисплее: none; и когда ваше первое изображение исчезнет, вы установите его для отображения: none; и установите второе изображение для отображения: block;

Вы также можете использовать абсолютное позиционирование.

Что касается вашей проблемы с анимацией сейчас, это изображение или текст, который вы хотели бы оживить, и если это изображение, какое событие должно запускать его?

Кроме того, не могли бы вы добавить функциональную анимацию в свой JSFiddle, пожалуйста?

источник

2015-06-17 07:34:24 Solasido

Вот обновленная скрипка-http: //jsfiddle.net/frww/mugu1u48/2/ Я не мог установить отображение: нет, потому что первое изображение не появляется вообще. Как я могу это исправить? Оба они должны быть анимированы, чтобы исчезнуть. При наведении на изображение текст должен выйти. И после 3 секунд или около того, оба изображения и текста должны исчезнуть, и следующее изображение должно исчезнуть. – fxrxh

Первое изображение не появляется, потому что оно установлено на непрозрачность: 0; У вашей анимации много проблем! Прежде всего, он не запускается вообще из того, что я видел, и я не профессионал в анимации CSS, но я думаю, что вы должны объявить его с помощью @keyframe, как описано там -> http: // www .w3schools.com/css/css3_animations.asp Затем вы используете «display: block;» и "display: none"; показать и скрыть свой текст. Проблема в том, что отображение: none; полностью удаляет элемент со сцены, поэтому ваша анимация никогда не будет запущена. Вместо этого вы должны использовать opacity 0 вместо текста! – Solasido

Fade In Out с эффектом зависания

ответ

Смежные вопросы