CSS исчезают слева направо

есть ли способ исчезать элементы (по крайней мере, только текст) и выходить слева направо или наоборот, используя только CSS?

вот пример что я имею в виду:

enter image description here

на самом деле, если это требует jQuery, я тоже приму это, как второй приоритет.

9
css fade javascript jquery

2 ответов

Да, вы можете сделать это с помощью CSS3 анимации (проверьте поддержку браузера здесь).

вот простой демо для текста-fading.

HTML-код:

<div class="text">
There is some text here!
<div class="fadingEffect"></div>
</div>​

CSS:

.text {
    position:relative;
    line-height:2em;
    overflow:hidden;
}
.fadingEffect {
    position:absolute;
    top:0; bottom:0; right:0;
    width:100%;
    background:white;
    -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
    -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
    -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
    -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
    animation: showHide 5s ease-in alternate infinite;
}
@-webkit-keyframes showHide { /* Chrome, Safari */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-moz-keyframes showHide { /* FF */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-ms-keyframes showHide { /* IE10 */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-o-keyframes showHide { /* Opera */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@keyframes showHide {
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}

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

затем вы можете использовать резервную копию jQuery для IE9 и ниже.

15

в photoshop или другом программном обеспечении для редактирования изображений создайте круглую область, которая прозрачна посередине и со всех сторон исчезает до сплошного белого цвета. Не стесняйтесь обрезать верхнюю/нижнюю часть по мере необходимости. Затем вы можете использовать CSS-переходы для анимации графики слева направо, чтобы достичь эффекта в демо. Для браузеров, таких как IE, которые не поддерживают переходы, используйте функцию cssHooks в jquery для выполнения анимации с помощью jQuery.

вы может создать это эффект с использованием градиентов css, но вы сталкиваетесь с проблемами поддержки браузера, а использование переходов на градиентах css очень плохо с точки зрения производительности. Тем не менее, просто анимация png24 очень проста и делает тот же эффект.

1