Jquery 当用户单击框外时，如何创建平滑的边框强调？

我试图在用户点击框外的时候强调一个框（这是一个错误框）

我一直在尝试使用jquery制作动画，然后简单地使用css转换，但它们并没有得到我想要的平滑效果。我只想简单强调一下，让用户重新关注警报。它就像任何Windows或Apple alert一样，你点击alert旁边的某个地方，它会发出声音并强调框

我尝试了

转换：边界线性0.2s

然后在用户单击外部后使用jquery创建边框

popup=$（“#popup”）；
$（窗口）。在（“单击”）上，函数（e）{
如果（例如target.id！=“弹出”）{
css（“边框”，“红色实心2px”）；
setTimeout（函数（）{
css（“边框”、“无”）；
}, 250);
}
})

#弹出窗口{
显示：块；
位置：固定；
左：50px；
顶部：50px；
填充：20px；
背景色：黑色；
颜色：白色；
边框：白色1px实心；
过渡：边界线性0.2s；
}

示例。

我建议用大纲代替边框

popup=$（“#popup”）；
$（窗口）。在（“单击”）上，函数（e）{
如果（例如target.id！=“弹出”）{
css（“轮廓宽度”，“10px”）；
setTimeout（函数（）{
css（“轮廓宽度”、“继承”）；
}, 250);
}
})

#弹出窗口{
显示：块；
位置：固定；
左：50px；
顶部：50px；
填充：20px；
颜色：#fff；
背景色：黑色；
轮廓：固体0px红色；
过渡：轮廓0.2s线性；
}

示例。