#nav {
    transition: background-color 3.5s;
    background-color: gray;
}

[popover]:popover-open {
    opacity: 1;
    transform: scaleX(1);

    @starting-style {
        opacity: 0;
        transform: scaleX(0);
    }
}

#target {
    transition: background-color 1.5s;
    background-color: green;
}

@starting-style {
    #target {
        background-color: transparent;
    }
}

#source {
    transition: background-color 2.5s;
    background-color: red;
}

source:first {
    opacity: 1;
    transform: scaleX(1);

    @starting-style {
        opacity: 0;
        transform: scaleX(0);
    }
}

#footer {
    color: yellow;
}

@starting-style {
    #footer {
        background-color: transparent;
    }
}

nav > [popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    padding+_: 10px;
    padding+_: 8px;
    padding+_: 6px;
    padding+_: 4px;
  }
}

aside > [popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);

  @starting-style {
    // vector math
    each(1 2 3 4, {
        padding+_: (@value * 10px);
    });
  }
}


