Hogyan tudom megcsinálni, hogy az animáció ne ismétlődjön?
html
<div class="background">
<h1>Szeretettel üdvözöllek a honlapomon!</h1>
</div>
css
.background h1 {
font-size: 55px;
text-align: center;
color: #f7f7f7;
text-shadow: 3px 3px #606060;
font-family: 'Blackadder ITC';
position:relative;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {right: -200px;}
to {right: 0px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px}
}
Az elég tragikus.
Sok más szép hobbi van még.
A problémám az, hogy hiába kikapcsolom a végtelen opciót, az akkor is mindig vissza ugrik az alaphelyzetre. Szóval a kérdésem az az lenne, hogy mit kell a css-ben változtatni, ahhoz, hogy az animáció egyszer menjen végbe, úgy hogy ne ugorjon vissza a kiinduló pontra, hanem maradjon ott, ahova animálva lett.
A választ előre is köszönöm.
Nem tudom erre a megoldásra gondoltál-e, én így értelmeztem...
Ezt cseréld ki:
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 2s;
erre:
-webkit-animation:mymove
-webkit-animation-duration:2s;
-webkit-animation-fill-mode:forwards;
animation:mymove;
animation-duration:2s;
animation-fill-mode:forwards;
vagy rövidebben:
-webkit-animation:mymove 2s;
-webkit-animation-fill-mode:forwards;
animation:mymove 2s;
animation-fill-mode:forwards;
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!