CSS3 Transition - Эффект Fade Out

Я пытаюсь реализовать эффект «выцветания» в чистом css. Вот fiddle Я просмотрел несколько решений в Интернете. Однако после прочтения documentation online CSS3 Transition - Эффект Fade Out

Я пытаюсь понять, почему анимация слайдов не работает. Любые указатели?

Вот HTML

<div class="dummy-wrap"> 
    <div class="success-wrap successfully-saved">Saved</div> 
</div>

CSS-

.dummy-wrap { 
    animation: slideup 2s; 
    -moz-animation: slideup 2s; 
    -webkit-animation: slideup 2s; 
    -o-animation: slideup 2s; 
} 
.success-wrap { 
    width: 75px; 
    min-height: 20px; 
    clear: both; 
    margin-top: 10px; 
} 
.successfully-saved { 
    color: #FFFFFF; 
    font-size: 20px; 
    padding: 15px 40px; 
    margin-bottom: 20px; 
    text-align: center; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background-color: #00b953; 
} 
@keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-moz-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-webkit-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
} 
@-o-keyframes slideup { 
    0% { 
     top:0px; 
    } 
    75% { 
     top:0px; 
    } 
    100% { 
     top:-20px; 
    } 
}

источник

2013-04-09 Anonymous

Вы можете использовать переходы вместо:

.successfully-saved.hide-opacity{ 
    opacity: 0; 
} 

.successfully-saved { 
    color: #FFFFFF; 
    text-align: center; 

    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -ms-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    opacity: 1; 
}

источник

2013-05-17 14:38:13 karthikr

Вы забыли добавить свойство положения в .dummy-wrap класса, а верхний/левый/нижний/правый значения не применяются к статически расположенным элементам (по умолчанию)

http://jsfiddle.net/dYBD2/2/

источник

2013-04-09 16:13:46 Adrift

Спасибо, но как бы я скрыть после перехода в целом? – 2013-04-09 16:18:22

Существует несколько способов: вы можете просто увеличить значение 'top', чтобы оно перемещалось« влево »в окне просмотра, или вы можете использовать непрозрачность для анимации, чтобы он исчезал, как вам кажется. – Adrift

Вот пример: http://jsfiddle.net/dYBD2/3/ с использованием прежнего метода – Adrift

Вот еще один способ сделать то же самое.

FadeIn эффект

.visible { 
    visibility: visible; 
    opacity: 1; 
    transition: opacity 2s linear; 
}

FADEOUT эффект

.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
}

Вы можете увидеть подробную статью here.

UPDATE: я нашел более уточненный учебник CSS3 Transition: fadeIn and fadeOut like effects to hide show elements и Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition здесь с образцом кода.

Я знаю, что я слишком поздно, чтобы ответить, но опубликовал этот ответ, чтобы сэкономить время. Надеюсь, это поможет вам!

источник

2014-01-03 18:07:03

Хороший ответ, я хочу добавить 'display: none', чтобы удалить поле, когда заканчивается анимация« скрыть », любая идея? – Apolo

Я не уверен, что вам нужно здесь, но вы можете попробовать 'display: block' вместо' visibility: visible' в '.visible 'class аналогично' display: none' вместо 'visibility: hidden' в классе' .hidden' из приведенного выше примера. –

@MMTac Это не работает, поскольку 'display' не является одним из [анимируемых свойств CSS] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). См. [Анимация с «display: block» на «display: none»] (http://www.impressivewebs.com/animate-display-block-none/). – peterflynn

Просто FYI, есть универсальная библиотека под названием animate.css, которую, возможно, вам интересны, у нее есть целая куча чистой анимации CSS3. Вы можете подобрать и использовать его или изучить технику внизу.

источник

2014-03-19 01:59:48 jasonslyvia

.fadeOut{ 
    background-color: rgba(255, 0, 0, 0.83); 
    border-radius: 8px; 
    box-shadow: silver 3px 3px 5px 0px; 
    border: 2px dashed yellow; 
    padding: 3px; 
} 
.fadeOut.end{ 
    transition: all 1s ease-in-out; 
    background-color: rgba(255, 0, 0, 0.0); 
    box-shadow: none; 
    border: 0px dashed yellow; 
    border-radius: 0px; 
}

demo here.

источник

2014-07-01 13:55:29

Это рабочий код для Вашего вопроса.
Наслаждайтесь Coding ....

<html> 
    <head> 

     <style> 

     .animated { 
      background-color: green; 
      background-position: left top; 
      padding-top:95px; 
      margin-bottom:60px; 
      -webkit-animation-duration: 10s;animation-duration: 10s; 
      -webkit-animation-fill-mode: both;animation-fill-mode: both; 
     } 

     @-webkit-keyframes fadeOut { 
      0% {opacity: 1;} 
      100% {opacity: 0;} 
     } 

     @keyframes fadeOut { 
      0% {opacity: 1;} 
      100% {opacity: 0;} 
     } 

     .fadeOut { 
      -webkit-animation-name: fadeOut; 
      animation-name: fadeOut; 
     } 
     </style> 

    </head> 
    <body> 

     <div id="animated-example" class="animated fadeOut"></div> 

    </body> 
</html>

источник

2017-09-28 05:54:56

Пожалуйста, приложите пояснения к вашему решению: как это работает? почему он отличается от других уже опубликованных решений? – lifeisfoo

@lifeisfoo Я пробовал использовать все решения, но это простой и простой способ сделать это, и еще одна важная вещь: текст будет исчезать автоматически через несколько секунд (10). Так что не нужно никакого щелчка. –

CSS3 Transition - Эффект Fade Out

ответ

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