Ir ao conteúdo

HTML Colocar animação em imagem


Ir à solução Resolvido por AfonsoMira,

Posts recomendados

Postado

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:))

  • Solução
Postado

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

 

  • Obrigado 1

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

LANÇAMENTO!

eletronica2025-popup.jpg


CLIQUE AQUI E BAIXE AGORA MESMO!