@Alphavirus
Mitglied
Moin
Ich hab hier eine Frage.
In dem unten stehenden Code dehnt sich beim hovern mit der mouse der main container nach rechts aus.
Wenn man allerdings die Maus vom main element weg bewegt, fällt die Animation in die Anfangsposition zurück.
Wie schafft man es. dass der Container ausgedehnt bleibt?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testanime</title>
<style>
main {
background-color: lightblue;
width: 50%;
height: 500px;
}
main:hover {
animation: testanime 1s;
animation-fill-mode: forwards;
}
@keyframes testanime {
from {
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<main>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aspernatur mollitia incidunt qui sequi error pariatur,
soluta eaque obcaecati, ex maxime fuga nobis neque
voluptas aliquid ullam autem earum, reprehenderit
repellendus.
</main>
</body>
</html>
Ich hab hier eine Frage.
In dem unten stehenden Code dehnt sich beim hovern mit der mouse der main container nach rechts aus.
Wenn man allerdings die Maus vom main element weg bewegt, fällt die Animation in die Anfangsposition zurück.
Wie schafft man es. dass der Container ausgedehnt bleibt?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testanime</title>
<style>
main {
background-color: lightblue;
width: 50%;
height: 500px;
}
main:hover {
animation: testanime 1s;
animation-fill-mode: forwards;
}
@keyframes testanime {
from {
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<main>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Aspernatur mollitia incidunt qui sequi error pariatur,
soluta eaque obcaecati, ex maxime fuga nobis neque
voluptas aliquid ullam autem earum, reprehenderit
repellendus.
</main>
</body>
</html>
