Få boksen til at vokse, dreje på plads og tone ind på vej ind i scrollporten. Lad den stå stille og være fuldt synlig, mens den er helt inde. På vej ud skal den krympe, dreje videre og tone ud.
Knyt animationen til view(), og udfyld keyframes med opacity, scale og rotate. Ved entry 0% skal boksen være usynlig, skaleret til 0.6 og roteret -20deg. Ved entry 100% og exit 0% skal den være fuldt synlig med scale: 1 og rotate: 0deg. Ved exit 100% skal den være usynlig, skaleret til 0.6 og roteret 20deg.
Ranges er angivet direkte i keyframes, så du behøver ikke tilføje animation-range. Prøv derefter at ændre entry 100% til entry 50%, så boksen er færdig med sin indgang tidligere.
Hints
-
animation-timeline -
opacity -
scale -
rotate
-
view() -
entry -
exit