Ir ao conteúdo
  • Cadastre-se

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


Posts recomendados

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?

 

apaga23.thumb.png.6972601a09a7714f36122524871cfa21.png

 

<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?

Link para o post
Compartilhar em outros sites

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;
}

 

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!