HTML Colocar animação em imagem

Joel Martins · 14 de abril de 2021

Eu vi isto

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {left:0px; top:0px;}
  5% { left:500px; top:0px;}
  100% {left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

e estava a tentar fazer a mesma coisa mas com uma imagem:

<center>
              <style>
                #PandaStore_logo_{
                    width="25%"
                    height="25%"
                    animation-name: pandastorelogo;
                    animation-duration: 4s;
                    position: relative;}
                
                @keyframes pandastorelogo {
                                        0%   {left:0px; top:0px;}
                                        25%  {left:200px; top:0px;}
                                        100% {left:0px; top:0px;}
                                        }
                  
              </style>
              <img src="Imagens/PandaStore(letters (line))1.png" id="PandaStore_logo_" alt="PandaStore_logo_">
              
              
              <hr>

Mas não está a funcionar. Alguém me consegue ajudar?

Obrigado:))

AfonsoMira · 14 de abril de 2021

@Joel Martins Boas,

Falta-lhe os " ; " no final de width e height.
Ficando assim:

<center>
              <style>
                #PandaStore_logo_{
                    width="25%";
                    height="25%";
                    animation-name: pandastorelogo;
                    animation-duration: 4s;
                    position: relative;}
                
                @keyframes pandastorelogo {
                                        0%   {left:0px; top:0px;}
                                        25%  {left:200px; top:0px;}
                                        100% {left:0px; top:0px;}
                                        }
                  
              </style>
              <img src="Imagens/PandaStore(letters (line))1.png" id="PandaStore_logo_" alt="PandaStore_logo_">
              
              
              <hr>