Как сделать эффект появления прозрачности не всего элемента сразу?

Рейтинг: 1Ответов: 3Опубликовано: 24.09.2014

Как сделать эффект появления прозрачности не всего элемента сразу?
Например, слева направо или снизу вверх?

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Например, так: http://jsfiddle.net/g7zovv5c/2/

<div class="container">
    <div class="transparent">content</div>
    <div class="overlay transparent">content</div>
</div>

.transparent {
    display: block;
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
    font-family: arial;
    opacity: 0.5;
    background-color: red;
    overflow: hidden;
}

.overlay {
    opacity: 1 !important;
    position: relative;
    top: -76px;
}

Суть: делаем 2 элемента, один прозрачный, другой нет, помещаем второй поверх первого. После этого мы можем анимировать верхний элемент, показывая часть нижнего, прозрачного. Анимацию можно сделать и на CSS3 Transitions.

▲ 2

Создать 2 слоя, в которых один является прозрачным относительно второго, но не является таковым относительно всего документа. Скриптом прописать перемещение нижнего слоя под прозрачным. Должен получиться ожидаемый эффект.

▲ 1

Для WebKit можно сделать так:

.transparency_gradient {
    -webkit-mask-image: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);

}

Но в остальных браузерах - пичалька.