Fórum Arrumar efeito de transition em menu dropdown #517985

27/04/2015

0

Front-end

Olá gente, bom dia. Estou tentando inserir um menu com animação e com efeito dropdown (menu já pronto em apenas html e css) em meu site, o problema é que o submenu até abre mas alem de ele não executar a animação de rotação quando inserido, tambem não consegui posicionar o submenu de maneira proporcional..

Html da pagina completa:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <title>Clinica de Fisioterapia EB</title>
    <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
    <link rel="stylesheet" type="text/css" href="_css/slidecss.css"/>
    <link rel="stylesheet" type="text/css" href="_css/main.css"/>
    <link href="_css/main.css" rel="stylesheet" type="text/css"/>
    <script src="_javascript/funcoes.js"></script>
</head>

<body>
<div id="interface">
    <header id="cabecalho">

        <nav id="menu">

            <div class="container" id="main" role="main">

            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <ul class="submenu">
                        <li><a href="#">Submenu a</a></li>
                        <li><a href="#">Submenu b</a></li>
                        <li><a href="#">Submenu c</a></li>
                        <li><a href="#">Submenu d</a></li>
                        <li><a href="#">Submenu e</a></li>
                        <li><a href="#">Submenu f</a></li>
                        <li><a href="#">Submenu g</a></li>
                        <li><a href="#">Submenu h</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <ul class="submenu">
                   
                    </ul>
                </li>
                <li><a href="#">Menu 3</a>
                    
                </li>
                <li><a href="#">Menu 4</a></li>
</div>
 </nav>

    </header>
    <section id="corpo">
        <article id="noticia-principal">
            <header id="cabecalho-noticia">
                <hgroup>
                    <h3 class="direita"</h3>
                </hgroup>

            </header>
            <h2>Conheça Nossa Clinica!</h2>
            <p>
               TEXTO CONTENDO:
                ORIGEM DA CLINICA, EQUIPE,MISSÃO
            </p>

        
                <div class="caixa">
                    <div id="caixa-slider">
                        <div id="slider">
                            <div id="mascara">
                                <ul>
                                    <li id="primeiro" class="primeira-anima">
                                        <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img1.jpg" alt="Lago"/></a>
                                    </li>
                                    <li id="segundo" class="segunda-anima">
                                        <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img2.jpg" alt="Neve"/></a>
                                    </li>
                                    <li id="terceiro" class="terceira-anima">
                                        <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img3.jpg" alt="Lagoa"/></a>
                                    </li>
                                    <li id="quarto" class="quarta-anima">
                                        <a href="#"><img src="http://blog.2bdesign.net/tutoriais/autoslideshow/imagens/img4.jpg" alt="Campo"/></a>
                                    </li>
                                    <li id="quinto" class="http://blog.2bdesign.net/tutoriais/autoslideshow/quinta-anima">
                                        <a href="#"><img src="imagens/img5.jpg" alt="Árvore"/></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="barra-progresso"></div>
                        </div>
                    </div>
                </div>

                <figcaption>
                    <h3>Clinica de Fisioterapia Eliane Brait</h3>
                    <p>Conheça nossa clinica!</p>
                </figcaption>
            </figure>
            <h2>Data de lançamento</h2>
            <p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja
                disponível em
                demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>

            <h2>Especificações Técnicas</h2>
            <table id="tabelaspec">
                <caption>Tabela Técnica do Google Glass <span>Mar/2013</span></caption>
                <tr>
                    <td class="ce">Tela</td>
                    <td class="cd">Resolução equivalente a tela de 25"</td>
                </tr>
                <tr>
                    <td rowspan="2" class="ce">Camera</td>
                    <td class="cd"> 5MP para fotos</td>
                </tr>
                <tr>
                    <td class="cd">720p para vídeos</td>
                </tr>
                <tr>
                    <td rowspan="2" class="ce">Conectividade</td>
                    <td class="cd"> Wi-Fi</td>
                </tr>
                <tr>
                    <td class="cd"> Bluetooth</td>
                </tr>
                <tr>
                    <td class="ce">Memória Interna</td>
                    <td class="cd"> 12GB</td>
                </tr>
            </table>


            <h2>Como funciona</h2>
            <p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na
                parte
                superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim
                como
                selecionar opções com o movimento da cabeça</p>

            <h2>O que você pode fazer com o Google Glasses</h2>
            <p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-humano”, já
                que
                o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado,
                mostrar
                o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>

            <video id="filme" controls="controls" poster="_imagens/video-mini01.jpg">
                <source src="_media/one-day.mp4" type="video/mp4">
                <!--<source src="_media/getting-started.mp4" type="video/webm">
                <source src="_media/getting-started.mp4" type="video/ogg">-->
                Desculpe mas não foi possível carregar o Vídeo.
            </video>


        </article>
    </section>
    <aside id="lateral">

        <h1>Outras Notícias</h1>
        <h2>Vídeo mais recente</h2>
        <div id="video2">
            <div id="Videodois">
                <iframe width="350" height="300" src="https://www.youtube.com/embed/c62ubOyZkVI" frameborder="0" allowfullscreen></iframe>
            </div>
        <h2>Novidades no Glass</h2>
        <p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no
            mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das
            hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em
            determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>

        <p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360
            pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a
            2,5 metros de distância do espectador.</p>
    </aside>
    <footer id="rodape">
        <p>Copyright © 2015 - by Bianca Assone <br/>
            <a href="http://facebook.com/biancaassone" target="_blank">Facebook</a>
        </p>
    </footer>
</div>
</body>
</html>



Css do menu

{
    margin: 0;
    padding: 0;


}
html

 {
    background-color: #000;
}

.container {
 
   margin: 30px auto;
    width: 90%;
}


/* general styles */

.menu, 
.menu ul
 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu {
    height: 28px;
}

.menu li
 {
  background: -moz-linear-gradient(#292929, #252525);

    background: -ms-linear-gradient(#292929, #252525);
  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
   
    background: -webkit-linear-gradient(#292929, #252525);

    background: -o-linear-gradient(#292929, #252525);
   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
   
    background: linear-gradient(#292929, #252525);

 
   border-bottom: 2px solid #181818;
   
   border-top: 2px solid #303030;
 
   min-width: 50px;
}

   .menu > li {

    display: block;
    
   float: left;
   
  position: relative;

}
.menu > li:first-child {
  
  border-radius: 5px 0 0;
}

.menu a {

    border

    -left: 3px solid rgba(0, 0, 0, 0);
  
    color: #808080;
   
    display: block;
     
    font-family: 'Lucida Console';

    font-size: 18px;
  
    line-height: 27px;
 
    padding: 0 25px;
      
    text-decoration: none;
   
    text-transform: uppercase;
}


/* onhover styles */

.menu li:hover
 {
    background-color: #1c1c1c;
 
   background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
 
   background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
  
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
 
   background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);

   background: -o-linear-gradient(#1c1c1c, #1b1b1b);
 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
  
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
 
   background: linear-gradient(#1c1c1c, #1b1b1b);

   border-bottom: 2px solid #222222;
  
  border-top: 2px solid #1B1B1B;

}

.menu li:hover > a {

 border-radius: 5px 0 0 0;
   
 border-left: 3px solid #C4302B;
   
 color: #C4302B;

}

/* submenu styles */

 .submenu {
 
  left: -50;
 
  max-height: 0;
  
  position: relative;

  top: 100%;
   
  z-index: 0;

  
  -webkit-perspective: 400px;

  -moz-perspective: 400px;
 
  -ms-perspective: 400px;
  
  -o-perspective: 400px;
  
  perspective: 400px;
}

.submenu li 

{
    opacity: 0;
  
-webkit-transform: rotateY(90deg);
    
-moz-transform: rotateY(90deg);
   
-ms-transform: rotateY(90deg);
  
-o-transform: rotateY(90deg);
 
transform: rotateY(90deg);

  
-webkit-transition: opacity .4s, 

-webkit-transform .5s;
  
-moz-transition: opacity .4s,

-moz-transform .5s;
   
-ms-transition: opacity .4s,

-ms-transform .5s;
   
 -o-transition: opacity .4s, 

-o-transform .5s;
   
 transition: opacity .4s, 
transform .5s;
}

.menu .submenu li:hover a 
{
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;

}
.menu > li:hover .submenu, .menu > li:focus .submenu
{
    max-height: 2000px;
    z-index: 10;

}
.menu > li:hover .submenu li, .menu > li:focus .submenu li
 {
    opacity: 1;

  
  -webkit-transform: none;
 
   -moz-transform: none;
  
  -ms-transform: none;
  
  -o-transform: none;
 
   transform: none;
}


/* CSS3 delays for transition effects */

.menu li:hover .submenu li:nth-child(1) {
   
 -webkit-transition-delay: 0s;
 
   -moz-transition-delay: 0s;
 
   -ms-transition-delay: 0s;
 
   -o-transition-delay: 0s;

    transition-delay: 0s;
}

.menu li:hover .submenu li:nth-child(2)
 {
    -webkit-transition-delay: 50ms;
   
 -moz-transition-delay: 50ms;
    
-ms-transition-delay: 50ms;
   
 -o-transition-delay: 50ms;

    transition-delay: 50ms;
}

.menu li:hover 
.submenu li:nth-child(3) {
   
 -webkit-transition-delay: 100ms;
   
 -moz-transition-delay: 100ms;
  
  -ms-transition-delay: 100ms;

    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.menu li:hover .submenu li:nth-child(4)
 {
    -webkit-transition-delay: 150ms;
 
   -moz-transition-delay: 150ms;
  
  -ms-transition-delay: 150ms;
  
  -o-transition-delay: 150ms;
  
  transition-delay: 150ms;
}

.menu li:hover .submenu li:nth-child(5) 
{
    -webkit-transition-delay: 200ms;
   
 -moz-transition-delay: 200ms;

    -ms-transition-delay: 200ms;
 
   -o-transition-delay: 200ms;
  
  transition-delay: 200ms;
}

.menu li:hover
 .submenu li:nth-child(6)
 {
    -webkit-transition-delay: 250ms;
    
-moz-transition-delay: 250ms;
   
 -ms-transition-delay: 250ms;
  
  -o-transition-delay: 250ms;
 
   transition-delay: 250ms;
}

.menu li:hover .submenu li:nth-child(7) 
{
    -webkit-transition-delay: 300ms;
    
-moz-transition-delay: 300ms;
   
 -ms-transition-delay: 300ms;
  
  -o-transition-delay: 300ms;
  
  transition-delay: 300ms;
}

.menu li:hover .submenu li:nth-child(8)
 {
    -webkit-transition-delay: 350ms;
  
  -moz-transition-delay: 350ms;
  
  -ms-transition-delay: 350ms;
   
 -o-transition-delay: 350ms;
   
 transition-delay: 350ms;
}


.submenu li:nth-child(1)
 {
    -webkit-transition-delay: 350ms;
 
   -moz-transition-delay: 350ms;
   
 -ms-transition-delay: 350ms;
  
  -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(2)
 {
    -webkit-transition-delay: 300ms;
  
  -moz-transition-delay: 300ms;
   
 -ms-transition-delay: 300ms;
 
   -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.submenu li:nth-child(3)
 {
    -webkit-transition-delay: 250ms;
 
   -moz-transition-delay: 250ms;
  
  -ms-transition-delay: 250ms;
   
 -o-transition-delay: 250ms;
    transition-delay: 250ms;
}

.submenu li:nth-child(4)
 {
    -webkit-transition-delay: 200ms;
   
 -moz-transition-delay: 200ms;
  
  -ms-transition-delay: 200ms;
  
  -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

.submenu li:nth-child(5)
 {
    -webkit-transition-delay: 150ms;
   
 -moz-transition-delay: 150ms;
   
 -ms-transition-delay: 150ms;
  
  -o-transition-delay: 150ms;
    transition-delay: 150ms;
}

.submenu li:nth-child(6)
 {
    -webkit-transition-delay: 100ms;
 
   -moz-transition-delay: 100ms;
    
-ms-transition-delay: 100ms;
   
 -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.submenu li:nth-child(7) 
{
  -webkit-transition-delay: 50ms;
 
  -moz-transition-delay: 50ms;
  
  -ms-transition-delay: 50ms;
    
  -o-transition-delay: 50ms;

  transition-delay: 50ms;
}

.submenu li:nth-child(8) {
 
   -webkit-transition-delay: 0s;
  
  -moz-transition-delay: 0s;
    
-ms-transition-delay: 0s;
   
 -o-transition-delay: 0s;
    transition-delay: 0s;
}


Demo do menu em funcionamento


Se alguem puder ajudar, ficaria muito grata kk" abs ^^
Bianca Assone

Bianca Assone

Responder

Post mais votado

27/04/2015

Apenas copiei e colei seu código, e a animação funcionou.
Poderia explicar melhor o que está ocorrendo?

Exemplo de seu código em funcionamento

Randrade

Randrade
Responder

Gostei + 1

Mais Posts

27/04/2015

Jothaz

Apenas copiei e colei seu código, e a animação funcionou.
Poderia explicar melhor o que está ocorrendo?

Exemplo de seu código em funcionamento


Isto esta me parecendo que a referência ao CSS não esta sendo encontrada!

Bom faça um teste, coloque o CSS dentro da página HTML e teste se funcionar é porque esta com pau na referência do CSS memso.

Claro que o recomendado é o CSS ficar separado, mas se funcionar é só corrigir a referência e separar novamente.
Responder

Gostei + 0

27/04/2015

Bianca Assone

Apenas copiei e colei seu código, e a animação funcionou.
Poderia explicar melhor o que está ocorrendo?

Exemplo de seu código em funcionamento


Isto esta me parecendo que a referência ao CSS não esta sendo encontrada!

Bom faça um teste, coloque o CSS dentro da página HTML e teste se funcionar é porque esta com pau na referência do CSS memso.

Claro que o recomendado é o CSS ficar separado, mas se funcionar é só corrigir a referência e separar novamente.


Pior que não é a referencia pq tem varias formatações deste menu que foram feitas no css ( cor backg; drop dos submenus, size..) e estão todas funcionando normalmente, apenas este efeito que não :/
Responder

Gostei + 0

27/04/2015

Randrade

Bia, até o momento eu não entendi qual o efeito que não está aparecendo. Pois no teste que postei ai em cima, com o seu código, o site está com o mesmo efeito do tutorial que você está seguindo.
Responder

Gostei + 0

27/04/2015

Jothaz

Apenas copiei e colei seu código, e a animação funcionou.
Poderia explicar melhor o que está ocorrendo?

Exemplo de seu código em funcionamento


Isto esta me parecendo que a referência ao CSS não esta sendo encontrada!

Bom faça um teste, coloque o CSS dentro da página HTML e teste se funcionar é porque esta com pau na referência do CSS memso.

Claro que o recomendado é o CSS ficar separado, mas se funcionar é só corrigir a referência e separar novamente.


Pior que não é a referencia pq tem varias formatações deste menu que foram feitas no css ( cor backg; drop dos submenus, size..) e estão todas funcionando normalmente, apenas este efeito que não :/


Você chegou a ver o exemplo funcional que o Randrade indicou?

Aqui testei em um desktop e em um notebook e o exemplo do Randrade funcionou!

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20150427-165349.png[/img]


Qual navegador e qual versão você esta utilizando?
Responder

Gostei + 0

28/04/2015

Bianca Assone

Você chegou a ver o exemplo funcional que o Randrade indicou?

Aqui testei em um desktop e em um notebook e o exemplo do Randrade funcionou!

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20150427-165349.png[/img]


Qual navegador e qual versão você esta utilizando?



[img]http://arquivo.devmedia.com.br/forum/imagem/418507-20150428-124852.jpg[/img]



Estou utilizando o Chrome 42.0.2311.90 m .


Mas acho que deve ser alguma configuração em css do slider que está interferindo, porque, é a unica coisa que tem de diferente do exemplo funcional do Randrade para o meu :////

Sei lá.. , mas de qualquer forma vou postar aqui o css do slider.


@charset "UTF-8";

#slider{
    background: #000;
    border:;
    box-shadow: 2px;
    height: 320px;
    width: 680px;
    margin: ;
    overflow: visible;
    position: relative;

}

#mascara {
    overflow: hidden;
    height: 320px;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}
#slider li.primeira-anima {
    animation: cycle 25s linear infinite;
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
    -ms-animation: cycle 25s linear infinite;
    -o-animation: cycle 25s linear infinite;
}

#slider li.segunda-anima {
    animation: cycletwo 25s linear infinite;
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
    -ms-animation: cycletwo 25s linear infinite;
    -o-animation: cycletwo 25s linear infinite;
}

#slider li.terceira-anima {
    animation: cyclethree 25s linear infinite;
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
    -ms-animation: cyclethree 25s linear infinite;
    -o-animation: cyclethree 25s linear infinite;
}

#slider li.quarta-anima {
    animation: cyclefour 25s linear infinite;
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
    -ms-animation: cyclefour 25s linear infinite;
    -o-animation: cyclefour 25s linear infinite;
}

#slider li.quinta-anima {
    animation: cyclefive 25s linear infinite;
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
    -ms-animation: cyclefive 25s linear infinite;
    -o-animation: cyclefive 25s linear infinite;
}
@keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

@-moz-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-moz-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-moz-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-moz-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

@-webkit-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-webkit-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-webkit-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-webkit-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}
@-ms-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-ms-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-ms-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-ms-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}


@-o-keyframes cycle {
    0%  { top: 0px; }
    4%  { top: 0px; }
    16% { top: 0px; opacity:1; z-index:0; }
    20% { top: 325px; opacity: 0; z-index: 0; }
    21% { top: -325px; opacity: 0; z-index: -1; }
    92% { top: -325px; opacity: 0; z-index: 0; }
    96% { top: -325px; opacity: 0; }
    100%{ top: 0px; opacity: 1; }
}

@-o-keyframes cycletwo {
    0%  { top: -325px; opacity: 0; }
    16% { top: -325px; opacity: 0; }
    20% { top: 0px; opacity: 1; }
    24% { top: 0px; opacity: 1; }
    36% { top: 0px; opacity: 1; z-index: 0; }
    40% { top: 325px; opacity: 0; z-index: 0; }
    41% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclethree {
    0%  { top: -325px; opacity: 0; }
    36% { top: -325px; opacity: 0; }
    40% { top: 0px; opacity: 1; }
    44% { top: 0px; opacity: 1; }
    56% { top: 0px; opacity: 1; }
    60% { top: 325px; opacity: 0; z-index: 0; }
    61% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}

@-o-keyframes cyclefour {
    0%  { top: -325px; opacity: 0; }
    56% { top: -325px; opacity: 0; }
    60% { top: 0px; opacity: 1; }
    64% { top: 0px; opacity: 1; }
    76% { top: 0px; opacity: 1; z-index: 0; }
    80% { top: 325px; opacity: 0; z-index: 0; }
    81% { top: -325px; opacity: 0; z-index: -1; }
    100%{ top: -325px; opacity: 0; z-index: -1; }
}
@-o-keyframes cyclefive {
    0%  { top: -325px; opacity: 0; }
    76% { top: -325px; opacity: 0; }
    80% { top: 0px; opacity: 1; }
    84% { top: 0px; opacity: 1; }
    96% { top: 0px; opacity: 1; z-index: 0; }
    100%{ top: 325px; opacity: 0; z-index: 0; }
}

.barra-progresso {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    animation: fullexpand 25s ease-out infinite;
}

@keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-moz-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-webkit-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
    4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
    16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
    17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
    18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}



@-ms-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

@-o-keyframes fullexpand {
    0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
    4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
    16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
    17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
    18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider:hover li,
#slider:hover .barra-progresso
{
    animation-play-state: paused;
}
Responder

Gostei + 0

28/04/2015

Randrade

A única diferença que vi, é que o slider estava se adaptando ao menu, ou seja, ao abrir o menu ele estava se alinhando e não sobre saindo.

Para esse problema, basta trocar a position do sldier de relative para absolute, ficando assim:

#slider{
    background: #000;
    border:;
    box-shadow: 2px;
    height: 320px;
    width: 680px;
    margin: ;
    overflow: visible;
    position: absolute;
 
}


Coloquei o restante do CSS que você postou, e não estou tendo problema nenhum, como você pode ver neste exemplo. Testei ele no IE 11, Firefox e Chrome, e funcionou normalmente em todos.
Segue um exemplo: Exemplo site Bia

Mas consegui reparar que o que você está usando, já possui muitas coisas além do que você postou, provavelmente alguma está dando conflito.
Para ajudar melhor, você pode postar o código completo, caso não haja problemas.
Ou, pode fazer o upload do seu site para um serviço free, e postar o link, que ficarei feliz em ajudar.

Esse servidor possui um serviço free, que você pode usar como teste: Hostinger
Responder

Gostei + 0

28/04/2015

Jothaz

Se é que possível completar a resposta mais que completa do Randrade, você sabe usar as Dev Toosl (Ferramentas para Desenvolvereos) do Chrme?

Podem ajudar bastante em problemas como este!
Responder

Gostei + 0

28/04/2015

Randrade

Se é que possível completar a resposta mais que completa do Randrade, você sabe usar as Dev Toosl (Ferramentas para Desenvolvereos) do Chrme?

Podem ajudar bastante em problemas como este!


Excelente dica Jothaz. Já perdi a conta de quantas vezes ele me salvou. rsrsrs

Essas duas buscas aqui, você encontra muito conteúdo de como utilizar ele, Bia:

Busca Google
Busca Youtube
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar