Nav fixed cambia con opacity en animacion @keyframes

ottojeanpierre · #1 (**permalink**) 09/07/2014, 12:45

Hola, saludos a todos, soy diseñador empezando en la programacion y estoy creando una web, pero tengo un problema :"La cabecera esta en position fixed(fija), pero debajo tengo un div llamado etiqueta en donde esta el banner animado en css(animation con background-position), pero al momento de hacer el efecto opacity en la img background de la div etiqueta, el div etiqueta salta al frente posicionandose sobre la cabecera". Espero me puedan ayudar. Gracias

P.D.:(1) He usado z-index pero no he visto resultado alguno. Mi codigo css esta en stylus.
(2)Pero al quitar el efecto opacity todo funciona correctamente.

Codigo HTML:

Código HTML:

<header>
        	<div id="cabecera">
                <div id="logotipo">
                    <a href="index.html"><img src="img/logomickysgym.png"></a>
                </div>
                <nav>
                    <ul id="navprincipal">

                        <li class="nombre">Micky's Gym & Fitness</li>
                        <li class="opciones"><a href="clases.html">Clases</a></li>
                        <li class="opciones"><a href="#">Rutinas</a></li>
                        <li class="opciones" id="desplegable">
                            <a href="#">Músculos / Ejercicio</a>

                                <ul id="navmusculos">
                                    <li><a href="#">Abdominales</a></li>
                                    <li><a href="#">Biceps</a></li>
                                    <li><a href="#">Espalda</a></li>
                                    <li><a href="#">Glúteos</a></li>
                                    <li><a href="#">Hombros</a></li>
                                    <li><a href="#">Piernas</a></li>
                                    <li><a href="#">Triceps</a></li>
                                </ul>

                        </li>
                        <li class="opciones"><a href="#">Staff</a></li>
                        <li class="opciones"><a href="#">Contacto</a></li>
                        <li id="facebook" class="redsocial"><a href="#"></a></li>
                        <li id="twitter" class="redsocial"><a href="#"></a></li>
                        <li class="horario"> L - S : 9:00 - 20:00 hrs.</li>

                    </ul>
                </nav>
            </div>    
            <div id="presentacion">
                <div id="etiquetas">
                    <div id="etiquetajuste">
                        <div id="etiquetatexto">
                            <div id="abdominales">
                                <h3>¿ABDOMINALES <br>REALES?</h3>
                            </div>
                            <div id="nosotros">
                    
                                <div id="consiguelos">
                                    ¡CONSÍGUELOS CON
                                </div>
                                <img src="img/nosotros.png">
                            </div>
                        </div>
                        <div id="etiquetaprecio">
                            <div id="oferta">
                                <img src="img/oferta.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

Codigo CSS:

Código:

body
  background:url("../img/fondofondo2.jpg") center top fixed no-repeat 
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -ms-background-size:cover;
  
  width: 100%
  margin: 0 auto
  overflow: scroll
  text-align: center

header
  width: 100%
  margin: 0 auto
  text-align: center

nav
  
  /*margin-left: -4px*/
  height:26px

#logotipo,nav
  display: inline-block
  vertical-align: top
  margin: 0
  padding: 0

nav ul li a  
  list-style:none
  text-decoration:none

#navprincipal
  box-shadow: 2px 2px 3px rgba(0,0,0,.35)


nav ul li
  display: inline-block
  background: #00afbd
  font-size: 14px
  list-style: none
  margin: auto 0
  padding: .2em 1em
  position:relative
  text-align: center
  vertical-align: middle

.opciones
  display: inline-block
  background: #00afbd
  border-right: 3px solid #0089a0
  color: #00667c
  font-size: 14px
  list-style: none
  text-decoration:none
  margin-right: -4px
  padding: .265em .6em
  vertical-align: middle

.opciones a:hover
  color: rgba(1, 45, 61, 1)

#abdominales
  
  width:125px
  margin-left:1.35em
  margin-bottom:1em
  opacity:1
  -webkit-transform:translateX(22px)
  -webkit-animation:verabdominales 10s
  -webkit-animation-iteration-count: infinite

@-webkit-keyframes verabdominales
  0%
    opacity:0
    -webkit-transform:translateX(-10px) 
  7%
    opacity:0
    -webkit-transform:translateX(-10px)
     
  25%
    opacity:1
    -webkit-transform:translateX(22px) 
    
  100%
    opacity:1
    -webkit-transform:translateX(22px) 
	
#cabecera
  position: fixed
  left: 17%
  margin: 0 auto
  text-align: center
  padding:0

#contenedor
  width: 80%
  margin: 0 auto

#consiguelos
  color: rgba(0,102,124,1)
  font-family:ubuntubolditalic
  font-size:24px
  margin:0
  padding-top:.1em

#etiquetas
  background-color: rgba(0, 0, 0, .2)

  background:url("../img/banner.png") center bottom no-repeat
  background-size:990px 193px
  background-position:-10px 36px
  opacity:1
  padding:0 1em
  z-index:-100
  width:78%
  margin:0 auto
  padding-top: 6em
  padding-bottom: 0em


  -webkit-animation: verbanner 10s
  -webkit-animation-iteration-count: infinite


@-webkit-keyframes verbanner
  0%   
    background-position:-10px 36px
    opacity:0

  10%
    
    background-position:15px 36px
    opacity:1
  100%
    
    background-position:15px 36px
    opacity:1

#etiquetatexto, #etiquetaprecio
  display:inline-block
  vertical-align:bottom
  margin:0

#etiquetatexto
  width:35%
  margin:0 0 0 5.5em

#etiquetaprecio
  width:15%
  text-align:left
  margin:0 0 0 14%
  padding:0
  font-size:0

  opacity:1
  -webkit-transform:translateX(-30px)
  -webkit-animation:verprecio 10s
  -webkit-animation-iteration-count: infinite

@-webkit-keyframes verprecio
  0%
    opacity:0
    -webkit-transform:translateX(-30px) 
     
  20%
    opacity:0
    -webkit-transform:translateX(-30px)

  35%
    opacity:0
    -webkit-transform:translateX(-30px)

  45%
    opacity:1
    -webkit-transform:translateX(0px) 
  
  50%
    opacity:1
    -webkit-transform:translateX(0px) 

  100%
    opacity:1
    -webkit-transform:translateX(0px) 

#etiquetajuste
  margin:0
  text-align:left 

#etiquetas img
  margin:0

#logotipo
  margin: 0
  padding:0

#desplegable #navmusculos 
  border-radius:0 0 7px 7px
  box-shadow: 2px 2px 3px rgba(0,0,0,.35)
  left:0
  margin:0
  opacity:0
  position:absolute
  width:142.5px
  overflow:hidden
  top: 26px;
  
  
  transition: opacity 1s
  -webkit-transition: opacity 1s
  -moz-transition: opacity 1s
  

#desplegable:hover > #navmusculos 
  opacity:1
  margin:0
  position:absolute
  left:0
  top:26px

#navmusculos li a
  border:none
  margin:0
  padding:0
  text-align:center
  padding:5px 20px

#navmusculos li a:hover
  color:#00667c

#navmusculos li:hover
  background-color:#00afbd

#navmusculos li 
  background-color:#00d7de
  border:1px solid #05e5e5
  display:block
  list-style:none
  margin:0 auto
  text-decoration:none
  
  height:0px
  overflow:hidden
  transition:height .5s
  -webkit-transition:height .5s
  -moz-transition:height .5s
  -ms-transition:height 1.5s

#navmusculos li:last-child
  border-radius:0 0 7px 7px

#desplegable:hover > #navmusculos li
  height:20px
  overflow:visible

#nosotros
  opacity:1
  -webkit-transform:translateX(-30px)
  -webkit-animation:vernosotros 10s
  -webkit-animation-iteration-count: infinite

@-webkit-keyframes vernosotros
  0%
    opacity:0
    -webkit-transform:translateX(-30px) 
     
  20%
    opacity:0
    -webkit-transform:translateX(-30px)

  35%
    opacity:1
    -webkit-transform:translateX(30px)

  50%
    opacity:1
    -webkit-transform:translateX(30px) 

  100%
    opacity:1
    -webkit-transform:translateX(30px) 

#presentacion
  margin:0
  padding:0