-2

Enquanto me encontrava a desenvolver um projeto deparei-me com uma dificuldade na qual venho pedir o vosso auxilio. Eu gostava que no meu projeto uma imagem que foi cortada no css permanece-se na posição final mesmo após a animação ter terminado, sendo que a animação só pode ser ativa se o rato estiver em cima da imagem, caso o rato saia de cima da imagem, a imagem volta de forma elegante á posição inicial. Ou seja, a imagem está em 0 porém após a colocação do rato em cima da mesma a imagem vai para 100 e permanece lá até o rato sair de cima da imagem caso o rato seja removido da imagem a mesma volta para 0

Este é algum do css que eu fiz:

img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    clip: rect(0px,480px,1111px,0);
    
}

img:hover {
   
    animation: animate1 1s ;
}

@-webkit-keyframes animate1{
    0%{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        clip: rect(0px,480px,1111px,0); 
    }
    100%{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        clip: rect(0px,680px,1111px,0);
    }
} 

1 Resposta 1

0

Para que a animação fique como no último estado, basta usar o fill-mode forwards, ficaria assim: img:hover {animation: animate1 1s forwards;}

Mas aconselho fazer desse modo:

img{
  background: blue;
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip: rect(0px,480px,1111px,0);
  transition: clip 1s; /*Adicione prorpiedade transition aqui*/
}

img:hover {
  clip: rect(0px,680px,1111px,0);/*Adicione os valores que irão alterar*/
  transition: clip 1s; /*Adicione prorpiedade transition aqui*/
}
2
  • E como faço para o inverso em vez de ser esquerda para direita , ser da direita para a esquerda Commented 18/11/2021 às 19:05
  • Desculpa a demora para a resposta. Você pode utilizar a propriedade clip-path para esconder uma parte. Ficaria assim: clip-path: inset(0 0 0 50%); na img normal e clip-path: inset(0 0 0 0); no img:hover. Commented 19/11/2021 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .