Animated Banner with HTML5

Navigation
1

Good afternoon, 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 did not work. Could you check the code and see if what I did is correct, to eliminate the 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>
    
asked by anonymous 06.09.2018 / 20:56

1 answer

1

I tested your HTML in the W3C HTML validation tool and no errors were found (except for images without the alt attribute). You can even test here and show it to your customer: link

ItestedyourCSSintheW3CCSSvalidationtoolandnoerrorswerefound,passedwith100%.Youcaneventesthereandshowittoyourcustomer: link

TherewasnoerrorintheChromeDevToolsconsoleeither.

Nowlet'sgotowhatIthinkmightbeyourproblem.vendorprefix

MakesureyourCSShastheprefixestoworkoneverybrowser.Ifyourclient'sbrowserdoesnotsupport@keyframesforexamplethecodewillcertainlygiveyoutroublethere

Hereisa"auto prefix" CSS tool. Sometimes it can help you: link

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 saite where you can consult the support of browsers CSS styles such as @keyframes : link

In the last case the problem is not with your code, it's in the way the client is doing the deployment at my sight!     

06.09.2018 / 21:22
How to check if a connection is "sleeping" in php? How to migrate a system made in C # using ASP.NET?