Why do these two CFrame calculations result in different result?

Applying rotation is not as simple as applying position.

Order in which you apply rotation on each axis matters.

Simple explanation: Imagine You want to rotate Your body 90 degree on X and Y axis.

First scenario - you apply x axis first.

1. You lay on your back. (90 degree x axis)
2. You roll right (90 degree y axis) You end up lying on your side facing a wall.

Second scenario - you apply y axis first.

1. You spin right (90 degree y axis)
2. You lay on your back (90 degree x axis) You end up lying on your back facing the ceiling.

In your first example, you rotate in x then y axis. (CFrame.Angles is equivalent to fromEulerAnglesXYZ). In second example you apply both axis each step, so the end result will be a mixture of x-y and y-x order rotation.

EDIT: Solution:

Use tween:

TS = game:GetService("TweenService")
STYLE = TweenInfo.new(
 1, --put TOTAL duration here in seconds
 Enum.EasingStyle.Linear)

local tween = TS:Create(script.Parent,STYLE,{CFrame = script.Parent.CFrame * CFrame.Angles(math.rad(x),math.rad(x),0)})
tween:Play()
tween.Completed:Wait() --optional, will pause the script until the tween is finished