I want to create a pulsing circle with forever repeating animation. I want it to have a gradual change of size and a momentary change of color when animation direction changes. I have two different animations for that, but only the last one having an effect on both (size and color change). What am I doing wrong here?

struct SwiftUIView: View {
    @State private var animationStarted = false

    let side = UIScreen.main.bounds.size.width

    let animation1 = Animation.easeInOut(duration: 0.3).delay(5.7)
    .repeatForever(autoreverses: true)

    let animation2 = Animation.easeInOut(duration: 6)
        .repeatForever(autoreverses: true)

    var body: some View {
        HStack {
            VStack {
                HStack {
                    Circle()
                        .foregroundColor(self.animationStarted ? Color.pink : Color.blue)
                        .animation(animation1)
                        .frame(width: self.animationStarted ? 10 : side, height: self.animationStarted ? 10 : side)
                        .animation(animation2)
                        .onAppear {
                            self.animationStarted.toggle()
                    }
                }
            }.frame(height: side)
        }.frame(width: side)
    }
}