在单选按钮组中选择单选按钮时获得过渡效果

Question

当用户选中单选按钮组中的单选按钮时，我想添加某种过渡效果。例如，当用户从Radio 1移到Radio 3时，我希望具有某种过渡效果，感觉好像Radio 1被取消选择，Radio 3被选择了。我该怎么办？

.d-flex {
            display: flex!important;
}

.flex-column {
            -webkit-box-orient: vertical!important;
            -webkit-box-direction: normal!important;
            -ms-flex-direction: column!important;
            flex-direction: column!important;
}

    <div class="d-flex flex-column">
       <div>
            <input type="radio" name="group" />
            <label>Radio 1</label>
       </div>
       
       <div>
            <input type="radio"  name="group" />
            <label>Radio 2</label>
       </div>
       
       <div>
            <input type="radio"  name="group" />
            <label>Radio 3</label>
       </div>
    </div>

当前，如果您尝试运行上述代码段，则选择看起来非常简单。因此，我想添加某种简单的过渡效果。

我阅读了一些CSS代码，例如an example here on codepen，但无法理解CSS的应用方式。