Как задать разный transition для разных значений свойства transform

На моем сайте есть анимация при скролле. Как только элемент попадает в область видимости экрана, ему присваивается класс active. Также на этом элементе есть эффект увеличения при наведении. Вот стили для этого класса:

.services_block
    transition: all 0.5s ease
    cursor: pointer
    transform: translate3d(0, 30px, 0)
    opacity: 0

    &.active
        transform: translate3d(0, 0, 0)
        opacity: 1
    
    &:hover
        background: linear-gradient(180deg, #FF77FF 100%, #FC1EFC 100%)
        transform: scale(1.03)

Всего таких блоков 4. Я хочу сделать поочередное появление, поэтому добавляю стили:

    &:nth-child(1).active
        transition: all 0.7s ease-in-out 0s

    &:nth-child(2).active
        transition: all 0.7s ease-in-out 0.4s

    &:nth-child(3).active
        transition: all 0.7s ease-in-out 0.6s

    &:nth-child(4).active
        transition: all 0.7s ease-in-out 0.8s

Но задержка распространяется не только на появление блоков, но и на эффект наведения, что не входило в мои планы. Как сделать задержку только для значения translate3d, но не применять ее к значению scale?