CSS CSS elementos aparecer de forma suave na tela assim que ela abrir!

[Mizrain Phelipe Sá]

Tenho essa tela que será um Dashboard do site, porém eu gostaria de fazer um efeito de animação que já vi em alguns sites, quando você abre a página alguns elementos que estavam escondidos vão aparecendo na tela de forma suave.

Como eu faço esse efeito?

 

 

<div id="contentDashboard">

    <div class="row resetLinha tituloDashboard">
        <div class="col-md-6">
            <p >Seja Bem-vindo!</p>
        </div>
        <div class="col-md-4" style="float: right;width: auto;">
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>

            <!-- Primary flat FAB button with ripple effect -->
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>

            <!-- Information flat FAB button with ripple effect -->
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>

            <!-- Success flat FAB button with ripple effect -->
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
           
        </div>        
    </div>

    <hr />

    <div class="row resetLinha">
        <div class="styleCards pmd-card pmd-card-default pmd-z-depth-1">

            <!-- Card media -->
            <div class="pmd-card-media">
                <img width="350" height="668" class="img-responsive" src="http://propeller.in/assets/images/profile-pic.png">
            </div>

            <!-- Card body -->
            <div class="pmd-card-body">
                Exemplo para acrescentar algo aqui
            </div>
        </div>
    </div>
</div>

 

Basicamente todos os elementos terão um display none, e quando a pessoa abrir essa página eles vão aparecendo, como faço?

[washalbano]

Olá!
Se aparecem um a um, acredito que é porque foram carregados assincronamente e só apareceram à medida em foram carregados.

Mas você vai conseguir resolver com a propriedade opacity.      A propriedade display não é animável.
Crie uma animação em css, que vá da opacidade zero até 1
Atribua a classe aos seus elementos.

adicionado 18 minutos depois

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation-name: fadeIn;
  animation-fill-mode: forwards;
}