Wie wird das Element in einen Stil und dann wieder in den Hover-Modus umgewandelt?

Question

Ich möchte das div in seinen :hover Stil und dann zurück, auf Hover und auf außerhalb von Hover übergehen. Ich weiß, dass ich Animationen verwenden kann, aber ich weiß nicht, wie ich es in dieses Szenario implementieren soll.

Ich mag es wie so (auf schweben und auch auf unhover) zu transformieren:

• Von: transform: perspective(320px) rotateX(0deg).
• An: transform: perspective(320px) rotateX(30deg).
• Dann zurück zu: transform: perspective(320px) rotateX(0deg).

#lorem { 
 
    width: 250px; 
 
    height: 18px; 
 
    background: #ff0000; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 12px; 
 
    transition: transform .75s ease-in-out; 
 
    } 
 
#lorem:hover { 
 
    transform: perspective(320px) rotateX(30deg); 
 
    }

<div id="lorem">LOREM</div>

Answer 1

ich landete mit zwei Animationen. Der Schlüssel war, dass die Animationen unterschiedliche Werte hatten, da sie nicht ausgelöst würden, wenn sie genau gleich wären, selbst wenn sie einen anderen Animationsnamen hätten. So könnte man 1deg im rotateX(0deg) durch die beiden Animationen ändern die Änderung

@keyframes fold { 
 
    0% {transform: perspective(320px) rotateX(0deg);} 
 
    50% {transform: perspective(320px) rotateX(30deg);} 
 
    100% {transform: perspective(320px) rotateX(0deg);} 
 
} 
 

 
@keyframes unfold { 
 
    0% {transform: perspective(320px) rotateX(0deg);} 
 
    50% {transform: perspective(320px) rotateX(15deg);} 
 
    100% {transform: perspective(320px) rotateX(0deg);} 
 
} 
 
#lorem { 
 
    width: 250px; 
 
    height: 18px; 
 
    background: #ff0000; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 12px; 
 
    transition: transform .75s ease-in-out; 
 
    animation: fold .75s ease-in-out 0s 1 normal; 
 
    } 
 
#lorem:hover { 
 
    animation: unfold .75s ease-in-out 0s 1 normal; 
 
    }

<div id="lorem">LOREM</div>

Answer 2

Sie sind ganz nah, sich dorthin zu gelangen! Denken Sie daran, dass wann immer Sie von einem Zustand in einen anderen wechseln wollen, Sie einen Anfangszustand definieren müssen. Fügen Sie also im ursprünglichen Zustand #lorem die ursprüngliche transform Eigenschaft hinzu, und es sollte gut funktionieren. Die einzige hinzugefügte Zeile ist die transform: perspective(320px) rotateX(0deg);. Siehe unten stehende Snippet:

#lorem { 
 
    width: 250px; 
 
    height: 18px; 
 
    background: #ff0000; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 12px; 
 
    transform: perspective(320px) rotateX(0deg); 
 
    transition: transform .75s ease-in-out; 
 
} 
 

 
#lorem:hover { 
 
    transform: perspective(320px) rotateX(30deg); 
 
}

<div id="lorem">LOREM</div>

Answer 3

Sie die von ghost_dad gegebene Antwort wählen. Wenn Sie das div zu ändern, um seine Hover-Zustand wollte, dann vielleicht können Sie versuchen, eine Animation wie diese stattdessen mit:

#lorem { 
 
    width: 250px; 
 
    height: 18px; 
 
    background: #ff0000; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 12px; 
 
    animation-name : example; 
 
    animation-duration: .75s; 
 
    animation-iteration-count: 2; 
 
    animation-direction: alternate; 
 
    transition: transform .75s ease-in-out; 
 
    animation-timing-function: ease-in-out; 
 
} 
 

 
#lorem:hover { 
 
    transform: perspective(320px) rotateX(30deg); 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    from {transform: perspective(320px) rotateX(0deg);} 
 
    to {transform: perspective(320px) rotateX(30deg);} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    from {transform: perspective(320px) rotateX(0deg);} 
 
    to {transform: perspective(320px) rotateX(30deg);} 
 
}

<div id="lorem">LOREM</div>

Wenn man es wollte, dann können Sie etwas tun, gedreht zu bleiben wie dies:

#lorem { 
 
    width: 250px; 
 
    height: 18px; 
 
    background: #ff0000; 
 
    color: #fff; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 12px; 
 
    animation-name : example; 
 
    animation-duration: .75s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
    transform: perspective(320px) rotateX(30deg); 
 
    transition: transform .75s ease-in-out; 
 
    animation-timing-function: ease-in-out; 
 
} 
 

 
#lorem:hover { 
 
    transform: perspective(320px) rotateX(0deg); 
 
} 
 

 
/* Chrome, Safari, Opera */ 
 
@-webkit-keyframes example { 
 
    from {transform: perspective(320px) rotateX(0deg);} 
 
    to {transform: perspective(320px) rotateX(30deg);} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    from {transform: perspective(320px) rotateX(0deg);} 
 
    to {transform: perspective(320px) rotateX(30deg);} 
 
}

<div id="lorem">LOREM</div>