kombinieren css Animation mit transform

Question

Ist es möglich, mit einer Animation comine css zu transformieren?

Ich habe diese tarnsform

transform: translate(-10%, 0px); left: 0px; 

der gut arbeitet Schieberegler nach links animieren, rechts

Scrollen

aber ich möchte von 0 Opazität etwas verblassen in der Animation hinzufügen, um 1

Answer 1

Wenn ich richtig verstehe, möchten Sie sowohl die Übersetzung als auch die Deckkraft in einer Animation enthalten:

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    animation-name: fromleft; 
 
    animation-delay: 0s; 
 
    animation-duration: 0.8s; 
 
    animation-fill-mode: backwards; 
 
    animation-timing-function: ease-out; 
 
} 
 

 
@keyframes fromleft { 
 
    0% { 
 
    transform: translateX(-100px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0px); 
 
    opacity: 1; 
 
    } 
 
}

<div> 
 

 
</div>