Executar efeito css ao carregar site

[rpmarques 3]

Buenas para todos, alguém pode me ajudar a fazer isto?

Tenho um css que faz um efeito legal numas imagens no nosso site, a minha dúvida é que eu gostaria que esse efeito fosse executado no momento que o site carregar, tem como fazer isto?

 

Abraços a todos.

[L. Henrique 179]

Ajudar a fazer o que? Qual efeito? Que execução? Onde está o código? No que especificamente você quer ajuda?

[rpmarques 3]

depois de carregar a página, amanhã eu posto o código css, ele funciona qndo eu passo o mouse, porém quero que seja executado qndo carregar o site.

[rpmarques 3]

Conforme prometido, segue o código do css:

/*
Peguei deste site este efeito bem legal
http://wime.com.br/2015/03/09/3-efeitos-em-css-ao-passar-o-mouse/
*/

.demo-3 {
    position:relative;
    width:300px;
    height:230px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    border-radius: 10px;
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    ;
    position:relative;
    //z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:justify
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:300px;
    padding:29px 44px;
    background-color:rgba(240, 142, 77, 1);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

e no html, esta assim

<ul class="demo-3">
            <li>
                <figure>
                    <img src="imgs/foto_filial_1.jpg" alt=""/>
                    <figcaption>
                        <h2>Filial 1</h2>
                        <p>
                            Nossa filial fica localizada na Avenida João Belchior Goulart, número 154, localizada em um ponto central
                            da nossa cidade para atender o público da região central, também possui serviços de padaria.<br>
                            <b>Fone: (55)-3244-1110</b>
                        </p>
                    </figcaption>
                </figure>
            </li>
        </ul>

este efeito é executado quando eu passo o mouse por cima dele, o que eu gostaria é que fosse executado a primeira vez quando terminasse de carregar o site...só que não consegui.

[L. Henrique 179]

Então, mas o :hover não é a base desse efeito? Já que quando carregar o site, dependendo de como está a visualização, o usuário não consiga nem ver que rolou um efeito.

O que você pode fazer é adicionar uma propriedade CSS (no caso essas que você mandou) a partir do momento em que a página estiver totalmente carregada, mas pra isso você vai precisar de JavaScript.

Lembre-se que dependendo da quantidade de itens, você vai ter um monte de coisas girando na tela e são efeitos que consomem um pouco de tempo e processamento.

[rpmarques 3]

Não tinha pensado nisso de várias coisas girando na tela, até porque a princípio são 4 uls que vão ter.

 

Mas como eu faria isto usando js?

[L. Henrique 179]

Você pode usar o document ready do jQuery, veja:

$(document).ready(function() {
   $('.classes_das_li').addClass('classe_do_efeito');
});