Animated Banner with HTML5
Good afternoon guys, I received a request to create an animated banner in HTML5. I created the banner using HTML and CSS, and it worked properly. The client was trying to implement on his website, which is probably in wordpress, and it did not work out. Could they check the code and see if what I did is correct, so we can eliminate the possibility of error in the code? I appreciate it now.
.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>1 answers
I tested your HTML in the W3C HTML validation tool and no errors were found (except images without the alt attribute). You can even test here and show pro your client: https://validator.w3.org/#validate_by_input
I tested your CSS in the W3C CSS validation tool and no error was found, passed with 100%. You can even test here and show pro your customer: https://jigsaw.w3.org/css-validator/#validate_by_input
No error appeared in the Chrome Dev Tools console either.
Now let's get to what I think may be your problem. vendor prefix
Make sure your CSS has the prefixes to work in all browsers. If your client's browser does not support @keyframes for example surely the code will give problem there
Here is a tool to "auto prefix" the CSS. To times can help you: https://autoprefixer.github.io /
Here you already have your CSS prefixed:
.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;
}
@-webkit-keyframes titulo-banner {
0% {left: -240px;}
30% {left: -240px;}
40% {left: -240px;}
50% {left: 15px;}
90% {left: 15px;}
100% {left: 15px;}
}
@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;
-webkit-animation: titulo-banner 3s ease-out 0s 1 normal;
animation: titulo-banner 3s ease-out 0s 1 normal;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
@-webkit-keyframes logo-banner {
0% {left: -170px;}
30% {left: -170px;}
40% {left: -170px;}
50%{left: 20px;}
90%{left: 20px;}
100% {left: 20px;}
}
@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;
-webkit-animation: logo-banner 6s ease-out 0s 1 normal;
animation: logo-banner 6s ease-out 0s 1 normal;
}
@-webkit-keyframes fundo-logo-banner{
0% {right: -300px;}
30% {right: -300px;}
40% {right: -300px;}
50%{right: 0px;}
90%{right: 0px;}
100% {right: 0px;}
}
@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;
-webkit-animation: fundo-logo-banner 5s ease-out 0s 1 normal;
animation: fundo-logo-banner 5s ease-out 0s 1 normal;
}
@-webkit-keyframes peca-banner{
0% {right: -170px;}
30% {right: -170px;}
40% {right: -170px;}
50%{right: 0px;}
90%{right: 0px;}
100% {right: 0px;}
}
@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;
-webkit-animation: peca-banner 4s ease-out 0s 1 normal;
animation: peca-banner 4s ease-out 0s 1 normal;
z-index: 1;
}And here is a site where you can consult the support of browsers to CSS styles such as @keyframes: https://caniuse.com/#feat=css-animation
in the last case the problem is not with your code, it is in the way the client is doing the deployment to my see!