Why isn't my fading UI script not fading correctly?

So I'm working on a UI that when you press the play button, it fades out and disables the camera manipulation. That part works except the fade part. Instead of fading, it just becomes slightly opaque and never fades. Here's my code:

local Player = game.Players.LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait()
local Camera = workspace.CurrentCamera

local PlayButton = script.Parent

repeat wait()
	Camera.CameraType = Enum.CameraType.Scriptable
until Camera.CameraType == Enum.CameraType.Scriptable
Camera.CFrame = workspace.CameraPart.CFrame

PlayButton.MouseButton1Click:Connect(function()
	for i = 1,100 do
		Player.PlayerGui.Fade.Blackness.BackgroundTransparency = script.Parent.BackgroundTransparency + 0.01
		wait()
	end
	wait(3) 
	for i = 1,100 do 
		Player.PlayerGui.Fade.Blackness.BackgroundTransparency = script.Parent.BackgroundTransparency + 0.01 
		wait() 
	end
	Camera.CameraType = Enum.CameraType.Custom
	PlayButton.Parent.Parent.Enabled = false
	game.Workspace.Sounds.Menu:Stop()
end)

I'm sorry if I'm typing wrong or something, I'm a very new to this website and this is my first answer.

	PlayButton.MouseButton1Click:Connect(function()
	    for i = 1,100 do
        Player.PlayerGui.Fade.Blackness.BackgroundTransparency = script.Parent.BackgroundTransparency + 0.01
        wait()
	    end
	    wait(3)
	    for i = 1,100 do
	        Player.PlayerGui.Fade.Blackness.BackgroundTransparency = script.Parent.BackgroundTransparency + 0.01
	        wait()
	    end
	    Camera.CameraType = Enum.CameraType.Custom
	    PlayButton.Parent.Parent.Enabled = false
	    game.Workspace.Sounds.Menu:Stop()
	end)

You made them fade, but after you when fading you, the script immediately runs the code after line 21. So, you got 2 solutions, one is using the wait() function and the another one is best method I guess.

(I'm just trying to be more specific).

SOLUTION 1: Use wait(4) or any other number that looks good for you at line 22, but first go to line 21 and then press enter on keyboard to move down the whole other to to a line down and then type the use the wait function.

SOLUTION 2 (BEST, I guess.):

Go to line 21 and press Enter to move the code at 22 and whole other code to a line down. After you're done doing that, type this:-

if Player.PlayerGui.Fade.Blackness.BackgroundTransparency == 1 then

end

Now cut the other code and paste it in that block, and there! I'm pretty sure that it's gonna work now. Hope this helps. Sorry, if it doesn't.

Use TweenService:

local TS = game:GetService("TweenService")
local TweenTime = 3
local Blackness = Player.PlayerGui.Fade.Blackness
local EndValue = 1
		
PlayButton.MouseButton1Click:Connect(function()
	local Info = TweenInfo.new(TweenTime, 
Enum.EasingStyle.Linear, 
Enum.EasingDirection.Out, 
0, false, 0)

	local Tween = TS:Create(Blackness, Info, {BackgroundTransparency = EndValue})

	Tween:Play()
end)