CSS3 Transition - Эффект исчезновения

96

Я пытаюсь реализовать эффект постепенного исчезновения на чистом 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;}
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>
Развернуть фрагмент

css css-transitions Пенни Лю
источник

Ответы:

96

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

.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;
}
Картикр
источник
3
в наши дни не нужны префиксы браузера, просто старый ... transition: opacity 3s easy-in-out;
danday74
177

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

эффект исчезновения

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

эффект fadeOut

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

UPDATE 1: Я нашел более современный учебник « Переход CSS3: эффекты fadeIn и fadeOut, подобные эффектам для скрытия элементов отображения и Пример всплывающей подсказки: Показать скрыть подсказку или текст справки с использованием перехода CSS3» с примером кода.

UPDATE 2: (Добавлены детали, запрошенные @ big-money)

При отображении элемента (путем переключения на видимый класс) мы хотим, чтобы видимость: visible активировалась мгновенно, поэтому можно перенести только свойство opacity. И при скрытии элемента (путем переключения на скрытый класс) мы хотим отложить объявление visibility: hidden, чтобы сначала увидеть переход постепенного исчезновения. Мы делаем это, объявляя переход в свойстве видимости с длительностью 0 секунд и задержкой. Вы можете увидеть подробную статью здесь.

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

Imayankmodi
источник
10
Хороший ответ, я хочу добавить, display:noneчтобы стереть поле, когда анимация "скрыть" закончится, есть идеи?
Apolo
1
Я не уверен, что вам здесь нужно, но вы можете попробовать display:blockвместо этого visibility: visibleв .visibleклассе, а display:noneне visibility: hiddenв .hiddenклассе из приведенного выше примера.
immayankmodi
4
@MMTac Это не работает, поскольку displayне является одним из свойств CSS, которые можно анимировать . См. Раздел « Анимация» с «display: block» на «display: none» .
peterflynn
@MayankModi, какова точка первых нулей на видимости эффекта fadeOut? Насколько я понимаю, вам просто нужны двойки
Большие деньги
1
@BigMoney это для продолжительности и задержки (конечно, вы можете изменить эти числа в соответствии с вашими требованиями, они используются только для примера). Убедитесь, что я обновил данные, поскольку этот ответ все еще активен.
immayankmodi
13

Поскольку displayэто не одно из свойств CSS, которые можно анимировать. Один display:noneFADEOUT замена анимации с чистым CSS3 анимации, только что установили width:0и height:0на последнем кадре, и использовать , animation-fill-mode: forwardsчтобы сохранить width:0и height:0свойства.

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}
Руи Ван
источник
1
Посмотрите на высокопроизводительные анимации . Вам следует избегать использования свойств CSS, которые вызывают изменение макета widthи heightявляются одновременно чувствительными.
Пенни Лю
4

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

<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>
Вишал Бирадар
источник
Приложите объяснение своего решения: как оно работает? почему он отличается от других уже опубликованных решений?
lifeisfoo
@lifeisfoo Я пробовал использовать, прежде всего, все решения, но это самый простой и легкий способ сделать это, и еще одна важная вещь - текст автоматически исчезнет через несколько секунд (10). Так что не нужно никакого щелчка.
Вишал Бирадар
3

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

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

Джейсон Яраги
источник
Спасибо, а как мне вообще спрятаться после перехода?
Есть несколько способов - вы можете просто увеличить topзначение, чтобы оно перемещалось «за пределы» области просмотра, или вы можете использовать непрозрачность для анимации, чтобы она исчезла так, как вы, кажется, хотите ..
Джейсон Яраги
1
отлично .. Я понял, но еще один вопрос, почему скрытый div возвращается к исчезновению?
3 
.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;
}

демо здесь.


источник