Как исчезнуть в тексте, не используя setInterval? Есть ли способ CSS сделать это?

Question

Я хочу, чтобы какой-то текст исчез. Я делал такие вещи, используя Javascript и setInterval.Это работает, но кажется, что это слишком много для такого простого эффекта.

Есть ли CSS-способ сделать текст более плавным?Например, он начинается с непрозрачности 0% и становится непрозрачным на 100% в течение указанного периода времени.

Спасибо.

Answer 1

Вы можете сделать это на :hover с помощью преобразований CSS3. Очень простой пример: http://jsfiddle.net/xaBgQ/

Answer 2

Некоторые идеи, которые приходят на ум:

1) Фреймворк для анимации, такой как jQuery, YUI и т. Д. Конечно, они, вероятно, используют setInterval для внутреннего использования, но тогда это их грязь, а не ваша.

2) CSS3 - если вам нужно работать только в последних браузерах или иметь запасной вариант, это может быть хорошим вариантом. Множество примеров, если вы Google для "CSS3 анимации"

3) Если ваш текст статичный и маленький, возможно вместо него анимированный GIF.

Надеюсь, это поможет!

Answer 3

Да, вы можете использовать функции синхронизации переходов CSS3.

Посмотрите здесь несколько примеров:

http://www.the -art-of-web.com / CSS / временная функция /

Answer 4

CSS3-переходы поддерживают это, но поддержка в настоящее время немного пятнистая.

Answer 5

Не только с CSS (во всех браузерах), jQuery предоставляет хороший API для таких эффектов, метод fadeIn , вероятно, подойдет.