Transição CSS3 - Efeito de esmaecimento

101

Estou tentando implementar o efeito "fade out" em CSS puro. Aqui está o violino . Eu procurei algumas soluções online, no entanto, depois de ler a documentação online , estou tentando descobrir por que a animação de slide não funcionava. Quaisquer dicas?

.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>
Expandir snippet

css css-transitions Penny Liu
fonte

Respostas:

101

Você pode usar transições em vez disso:

.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;
}
Karthikr
fonte
6
não precisa de prefixos de navegador hoje em dia, simplesmente ... transição: opacidade 3s fácil de entrar;
danday74
182

Aqui está outra maneira de fazer o mesmo.

efeito fadeIn

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

efeito fadeOut

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

UPDATE 1: Encontrei um tutorial mais atualizado Transição CSS3: fadeIn e fadeOut como efeitos para ocultar elementos de exibição e Exemplo de dica de ferramenta: Mostrar Dica de Ocultar ou Texto de Ajuda usando Transição CSS3 aqui com código de exemplo.

UPDATE 2: (Adicionados detalhes solicitados por @ big-money)

Ao mostrar o elemento (mudando para a classe visível), queremos que o visibility:visibleseja ativado instantaneamente, portanto, não há problema em fazer a transição apenas da propriedade opacity. E ao ocultar o elemento (mudando para a classe oculta), queremos atrasar a visibility:hiddendeclaração, para que possamos ver a transição fade-out primeiro. Estamos fazendo isso declarando uma transição na propriedade de visibilidade, com uma duração de 0s e um atraso. Você pode ver um artigo detalhado aqui .

Eu sei que estou muito atrasado para responder, mas postar esta resposta para economizar tempo de outras pessoas. Espero que ajude você !!

immayankmodi
fonte
10
Boa resposta, estou querendo adicionar display:nonepara apagar a caixa quando a animação "ocultar" terminar, alguma ideia?
Apolo
1
Não tenho certeza do que você precisa aqui, mas você pode tentar em display:blockvez de visibility: visiblena .visibleaula da mesma forma, em display:nonevez de visibility: hiddenna .hiddenaula do exemplo acima.
immayankmodi
4
@MMTac Isso não funciona, pois displaynão é uma das propriedades CSS animáveis . Consulte Animando de “display: block” para “display: none” .
peterflynn
@MayankModi qual é o ponto dos primeiros 0s na visibilidade para o efeito fadeOut? Pelo que entendi, você só precisa do 2s
Big Money
1
@BigMoney é para duração e atraso (com certeza você pode modificar esses números de acordo com suas necessidades, eles são usados ​​apenas por exemplo). Verifique eu atualizei os detalhes, pois esta resposta ainda está ativa.
immayankmodi
13

Uma vez que displaynão é uma das propriedades CSS animáveis. Uma display:nonesubstituição de animação fadeOut com animações CSS3 puros, basta configurar width:0e height:0no último quadro, e uso animation-fill-mode: forwardspara manter width:0e height:0propriedades.

@-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;
}
Rui Wang
fonte
1
Olhe para animações de alto desempenho . Você deve evitar o uso de propriedades CSS que acionam o novo layout widthe heightsão confidenciais.
Penny Liu de
5

Este é o código de trabalho para sua pergunta.
Aproveite a codificação ...

<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>
Vishal Biradar
fonte
Anexe uma explicação de sua solução: como funciona? porque é diferente das outras soluções já postadas?
lifeisfoo
@lifeisfoo Tentei acima de tudo soluções, mas esta é a maneira mais simples e fácil de fazer e mais uma coisa importante é que o texto irá desaparecer automaticamente após alguns segundos (10). Portanto, não há necessidade de nenhum clique.
Vishal Biradar
3

Você se esqueceu de adicionar uma propriedade de posição à .dummy-wrapclasse, e os valores superior / esquerdo / inferior / direito não se aplicam a elementos posicionados estaticamente (o padrão)

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

Jason Yaraghi
fonte
Obrigado, mas como eu me esconderia após a transição?
Existem várias maneiras - você pode apenas aumentar o topvalor para que "saia" da janela de visualização ou pode usar opacidade para a animação para que desapareça como você parece querer ..
Jason Yaraghi
1
ótimo .. eu entendi, mas mais uma pergunta, por que o div oculto volta a desaparecer?
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;
}

demonstração aqui.


fonte