Banner animated with HTML5

Question

Good afternoon Folks, I received a request to create an animated banner in HTML5. I created the banner using HTML and CSS, and it worked correctly. The client was trying to implement on his site, which is probably in wordpress, and it did not work. Could you check the code and see if what I did is correct, to eliminate the possibility of error in the code? Thanks in advance.

.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>

Answer 1

I tested your HTML in the W3C HTML validation tool and no errors were found (other than images without the attribute alt). You can even test here and show your client: https://validator.w3.org/#validate_by_input

I tested your CSS in the W3C CSS validation tool and no errors were found, it passed with 100%. You can even test here and show your client: https://jigsaw.w3.org/css-validator/#validate_by_input

Chrome Dev Tools console also showed no error.

Now let’s get to what I think might be your problem. vendor prefix

Make sure your CSS has the prefixes to work in every browser. If your client’s browser does not support @keyframes for example certainly the code will give problem there

Here’s a "auto prefix" CSS tool. Sometimes it can help you: https://autoprefixer.github.io/

You already have your CSS prefixed here:

.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 saite where you can consult the support of browsers to CSS styles as for example the @keyframes: https://caniuse.com/#feat=css-Animation

In the latter case the problem is not with your code, it is in the way the client is making the deployment in my view!