Postagens
Male
Eu tenho uma "animation" em css3 e após ela ser executada eu quero executar outra animation. Eu achei que com o comando animation-delay eu conseguiria mas acontece que a animação é uma barra começar com opacity 0 e ficar com opacity 1, só que a barra no momento da primeira ação já está aparecendo, e com a opacity 0.6 que eu defini, dai depois do tempo que eu coloquei em delay, a desgraçada executa... vejam o código css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
body {
margin: 0 auto;
width:100%;
height:100%;
background-color:#3A3A3A;
}
div.meio{
width:1200px;
height:560px;
opacity: 1;
border: solid;
top:10px;
border-width: 1px;
border-color: #FFF;
margin: 0 auto;
background-color:#AAAAAA;
position:relative;
animation:efeito_clarear 0.5s linear;
-moz-animation:efeito_clarear 0.5s linear;
-webkit-animation:efeito_clarear 0.5s linear;
}
@keyframes efeito_clarear
{
0% {width:1170px; height:550px; opacity: 0;}
100% {width:1200px; height:560px; opacity: 1;}
}
@-moz-keyframes efeito_clarear
{
0% {width:1170px; height:550px; opacity: 0;}
100% {width:1200px; height:560px; opacity: 1;}
}
@-webkit-keyframes efeito_clarear
{
0% {width:1170px; height:550px; opacity: 0;}
100% {width:1200px; height:560px; opacity: 1;}
}
/*EFEITO PARA MENU*/
div.barra_menu{
width:100%;
background-color:#000;
height:30px;
top: 5px;
opacity:0.6;
position:relative;
animation:efeito_menu 0.5s linear 1s;
-moz-animation:efeito_menu 0.5s linear 1s;
-webkit-animation:efeito_menu 0.5s linear 1s;
}
@keyframes efeito_menu{
from {opacity: 0; }
to {opacity:0.6;}
}
@-moz-keyframes efeito_menu{
from {opacity: 0; }
to {opacity:0.6;}
}
@-webkit-keyframes efeito_menu{
from {opacity: 0;}
to {opacity:0.6;}
}
</style>
</head>
<body>
<div class="meio">
<div class="barra_menu">
</div>
</div>
</body>
</html>
