css实现盒子边框动画

<div class="box"></div>

动画通过两个伪类实现，一个伪类负责横向border 。另一个伪类负责纵向的border。
负责横向border的伪类设置上下border的宽度为1px 左右border的宽度为0px 达到隐藏纵向border 的效果。即border-width:1px 0;
另一个伪类则和第一个相反即可。最后通过hover来触发border的显示

.box{
                background: yellowgreen;
                width: 200px;
                height: 100px;
                color: #fff;
                position: relative;
                margin: 30px;
                box-sizing: border-box;
            }
            .box:before{
                width: 0;
                height: 100%;
                border-width:1px 0;
                top: -1px;
                right: 0;
                content: "";
                border-style: solid;
                position: absolute;
                border-radius: 1px;
                box-sizing: content-box;
                transition: all 0.5s;
                background-color: transparent;
                z-index: 0;
                -webkit-transition-delay: 0.05s;
                transition-delay: 0.05s;
            }
            .box:hover:before{
                width: 100%;
                border-color: red;
            }
            .box:after{
                width: 100%;
                height: 0;
                border-width: 0 1px;
                bottom: 0;
                left: -1px;
                content: "";
                border-style: solid;
                position: absolute;
                border-radius: 1px;
                box-sizing: content-box;
                transition: all 0.5s;
                background-color: transparent;
                z-index: 0;
                -webkit-transition-delay: 0.05s;
                transition-delay: 0.05s;
            }
            .box:hover:after{
                height: 100%;
                border-color: red;
            }

image.png

动画效果为border缓慢填满

image.png