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);
}
}