Unexpected animation stack behavior on View - animation

Question

The documentation says
.animation(, value:) Applies the given animation to this view when the specified value
changes.
When I have stack animations stack on my view, it is understandable that animation modifier animates all changed until its line after modifier changes shouldn't animate, that's fine until two animations.
When I add the third animation on the stack, this third change is affected by the first animation which is commented as below.
Is there any explanation for that? Am I missing something or this is a bug?
struct ContentView: View {
// MARK: Properties
#State private var half = false
#State private var dim = false
#State private var isBlack = false
#State private var isRotated = false
// MARK: View
var body: some View {
Image(systemName: "trash.fill")
.resizable()
.scaledToFit()
.rotationEffect(isRotated ? .degrees(180) : .degrees(0))
.opacity(dim ? 0.2 : 1.0)
.animation(.easeInOut(duration: 1.0), value: dim) // animates half, isblack and isRotated
.scaleEffect(half ? 0.5 : 1.0)
.animation(.easeInOut(duration: 5.0), value: half) // animates only half
.foregroundColor(isBlack ? .black : .blue)
.animation(.easeInOut(duration: 15.0).delay(5), value: isBlack) // doesnt have any effect
.onTapGesture {
dim.toggle()
half.toggle()
isBlack.toggle()
isRotated.toggle()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}