$yellow2: #FAB002; pickupfeed { position: absolute; right: 280px; bottom: 280px; flex-direction: column; text-align: right; transform: skew(0deg, 5deg); .entry { transition: all 0.2s ease-out; opacity: 1; height: 50px; overflow: hidden; justify-content: flex-end; align-items: center; min-width: 300px; font-size: 32px; font-weight: bolder; color: #ff0000; font-family: Teko-SemiBold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); // // Pseudo class set for the last frame of its life // (and keeps the panel alive until transition ends) // &:outro { opacity: 0; transition: all 1.0s linear; } label { white-space: nowrap; min-width: 200px; color: lawngreen; width: 100%; text-align: right; } .icon { width: 100%; height: 100px; background-size: contain; background-position: right center; background-repeat: no-repeat; background-image-tint: #fa0; } // // Pseudo class set for the first time of its life // &:intro { height: 0px; padding: 0px 16px; opacity: 0; color: white; .icon { background-image-tint: #fff; } label { color: #fff; } } } }