CSS Анимация/переход, взаимодействующий с непрозрачностью

На данный момент у меня есть текст, который затухает и исчезает, и когда пользователь наводится на текст, он должен «перейти» к его полной непрозрачности (непрозрачность: 1).CSS Анимация/переход, взаимодействующий с непрозрачностью

В настоящее время у меня есть это: `https://jsfiddle.net/17ppzb2p/4/

HTML

<!DOCTYPE html> 
<body> 
    <div id="start"> 
     START 
    </div> 
</body>

CSS

@-webkit-keyframes fadeInOut{ 
    0% { 
     opacity: 0.2; 
    } 
    50% { 
     opacity: 0.5; 
    } 
    100% { 
     opacity: 0.2; 
    } 
} 
@-webkit-keyframes glow { 
    0% { 
     opacity: 0.4; /*from current opacity*/ 
    } 
    100% { 
     opacity: 1; 
    } 
} 
#start { 
    position: absolute; 
    top: 50px; 
    left: 80px; 
    font-size: 36px; 
    letter-spacing: 30px; 
    color: black; 
    font-weight: 400; 
    -webkit-animation: fadeInOut 6s infinite; 
    /* -webkit-transition: opacity 1s; */ 
    /* Failed attempt to use transition to change opcaity. */ 
} 
#start:hover { 
    -webkit-animation-play-state: paused; 
    -webkit-animation: glow 2s; 
    /* opacity: 1; */ 
}

Я хочу непрозрачности, чтобы перейти от текущего непрозрачности, контролируемой fadeInOut анимация -> до полной непрозрачности.

Я знаю, что для использования текущего значения непрозрачности я должен использовать «переход», но когда я это пробую, он не перезаписывает текущую непрозрачность из анимации fadeInOut.

Я надеюсь, что это имело смысл :)

Приветствия!

источник

2015-12-07 Edwarric

Вам необходимо установить непрозрачность 0 для #start (до наведения). Всякий раз, когда вы используете переход, вы должны убедиться, что у вас есть «начальная» настройка.

#start { 
    opacity: 0 //here 
    position: absolute; 
    top: 50px; 
    left: 80px; 
    font-size: 36px; 
    letter-spacing: 30px; 
    color: black; 
    font-weight: 400; 
    -webkit-transition: opacity 1s; 
} 

#start:hover { 
    opacity: 1; 
}

Это должно сработать. Дайте мне знать, если вам нужна помощь.

источник

2015-12-07 23:45:06 plushyObject

Имейте в виду, что при работе с непрозрачностью по тексту, это может быть лучше использовать цвет: RGBA (0,0,0, 0) и цвет: rgba (0,0,0,1,0), а затем вместо этого переход на цвет. – plushyObject

К сожалению, это не сработает :(Вот мой реальный код, которым я его управлял: https://jsfiddle.net/ccr1ca8s/ Вместо этого ваше решение просто замораживает непрозрачность при паре. Не могли бы вы еще раз взглянуть? :) – Edwarric

Если вы хотите получить полный эффект непрозрачности текста наведения, вы можете установить начальную непрозрачность по своему усмотрению. Например:

#start { opacity: 0.3 //here position: absolute; top: 50px; left: 80px; font-size: 36px; letter-spacing: 30px; color: black; font-weight: 400; -webkit-transition: opacity 1s;} #start:hover { opacity: 1; }

и при наведении курсора установите его в 1.

источник

2015-12-08 08:45:28

То, что сказал плюшевый объект ... Это не работает, извините. – Edwarric

CSS Анимация/переход, взаимодействующий с непрозрачностью

ответ

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