How do I fade out a GUI after a click?

Maybe I'm just being kinda stupid but I'm trying to fade out a GUI frame after a left click on a text button but I'm not sure how to do it.

Can anyone help?

My code is this:

--variables--
local playButton = script.Parent.PlayButton
local quitButton = script.Parent.QuitButton
local creditsButton = script.Parent.CreditsButton
local mainFrame = script.Parent

--scripts--
playButton.MouseButton1Click:Connect(function()
	
end)

There are multiple ways to achieve this:

#1: TweenService. Using TweenService would be smoother, however it requires more lines of code.

local TweenService = game:GetService("TweenService")
local TweenInfo = TweenInfo.new() --TweenInfo is basically the "style" of how you want to tween.
local Properties = {} --You need a table of the properties you want to edit.

local Tween = TweenService:Create(mainFrame,TweenInfo,Properties)

playButton.MouseButton1Click:Connect(function()
	Tween:Play() --Plays the tween
end)

Links: TweenService, TweenInfo

#2: Using a for loop. For loops don't "cost" very many lines, but it's a bit less smooth.

playButton.MouseButton1Click:Connect(function()
	for i = 1,100 do
		mainFrame.Transparency = mainFrame.Transparency + .01
		wait()
	end
end)

Links: Loops