Boa tarde Pessoal, Recebi um pedido para criar um banner animado em HTML5. criei o banner utilizando o HTML e CSS, e funcionou corretamente. O cliente foi tentar implementar em seu site, que provavelmente é em wordpress, e não deu certo. Poderiam verificar o código e ver se o que eu fiz está correto, para eliminarmos a hipótese de erro no código? Desde já agradeço.
.box-banner{
width: 300px;
height: 250px;
overflow: hidden;
background: url("https://litens.com/wp-content/uploads/2018/09/fundo.png");
position: relative;
background-repeat: no-repeat;
}
@keyframes titulo-banner {
0% {left: -240px;}
30% {left: -240px;}
40% {left: -240px;}
50% {left: 15px;}
90% {left: 15px;}
100% {left: 15px;}
}
.titulo-banner{
width: 230px;
padding: 5px;
color: #fff;
position: absolute;
font-size: 30px;
font-weight: bold;
top: 18px;
left: 15px;
z-index: 1;
line-height: 15px;
animation: titulo-banner 3s ease-out 0s 1 normal;
transition-timing-function: ease-in-out;
}
@keyframes logo-banner {
0% {left: -170px;}
30% {left: -170px;}
40% {left: -170px;}
50%{left: 20px;}
90%{left: 20px;}
100% {left: 20px;}
}
.logo-banner{
position: absolute;
bottom: 15px;
left: 20px;
animation: logo-banner 6s ease-out 0s 1 normal;
}
@keyframes fundo-logo-banner{
0% {right: -300px;}
30% {right: -300px;}
40% {right: -300px;}
50%{right: 0px;}
90%{right: 0px;}
100% {right: 0px;}
}
.fundo-logo-banner{
position: absolute;
bottom: 0px;
right: 0;
animation: fundo-logo-banner 5s ease-out 0s 1 normal;
}
@keyframes peca-banner{
0% {right: -170px;}
30% {right: -170px;}
40% {right: -170px;}
50%{right: 0px;}
90%{right: 0px;}
100% {right: 0px;}
}
.peca-banner{
position: absolute;
top: 43.5px;
right: 0;
animation: peca-banner 4s ease-out 0s 1 normal;
z-index: 1;
}
<div class="box-banner">
<img src="https://images.tcdn.com.br/img/img_prod/444589/produto_teste_7080_1_20180221140614.png" class="titulo-banner"/>
<img src="https://mancilha.files.wordpress.com/2008/09/teste2.png" class="fundo-logo-banner"/>
</div>