CSS ile border animasyonu oluşturmak, web sayfalarınıza dinamiklik ve etkileşim katmanın harika bir yoludur. Bu animasyonlar, kullanıcıların dikkatini çekmeye, belirli öğeleri vurgulamaya ve genel kullanıcı deneyimini geliştirmeye yardımcı olabilir.

Border animasyonu oluşturmak için @keyframes kuralını ve animation özelliğini kullanabilirsiniz. @keyframes kuralı, animasyonun farklı aşamalarını tanımlar. animation özelliği ise animasyonun nasıl uygulanacağını belirler.

Border animasyonu oluşturmak için şu adımları izleyebilirsiniz:

1. @keyframes kuralını kullanarak animasyonun farklı aşamalarını tanımlayın. Her aşama için, border rengi, genişliği ve stili gibi özelliklerini belirleyebilirsiniz.
2. animation özelliğini kullanarak animasyonun nasıl uygulanacağını belirleyin. Bu özellik için animasyonun süresini, tekrar sayısını, zamanlama işlevini ve diğer özelliklerini belirleyebilirsiniz.

Sizler için bir örnek hazırladım. Kodları aşağıda paylaşıyorum. Demoyu şuradan inceleyebilirsiniz. CSS Border Animation (codepen.io)

HTML

<a href="#" target="_blank">
<section>
    <div class="container">
        <div class="main-box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="content-area">
                <img src="https://serdarkaraca.com.tr/serdarkaraca.jpg" width="255" height="255">
                </img>
            </div>
        </div>
    </div>
</section>
</a>
      

CSS

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: green;
}

.main-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: #111845A6;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid #2a3cad;
    color: white;
}

.main-box:before{
    content: '';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background: rgba(255,255,255,0.1);
    transition:0.5s;
    pointer-events: none;
}

.main-box:hover:before{
    left:-50%;
    transform: skewX(-5deg);
}

.main-box .content-area{
    position:absolute;
    top:15px;
    left:15px;
    right:15px;
    bottom:15px;
    border:1px solid orange;
    padding:4px;
}

.main-box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
}

.main-box span:nth-child(1)
{
    transform:rotate(0deg);
}

.main-box span:nth-child(2)
{
    transform:rotate(90deg);
}

.main-box span:nth-child(3)
{
    transform:rotate(180deg);
}

.main-box span:nth-child(4)
{
    transform:rotate(270deg);
}

.main-box span:before
{
    content: "";
    position: absolute;
    width:100%;
    height: 2px;
    background: #50dfdb;
    animation: animate 1s linear infinite;
}

@keyframes animate {
    0% {
        transform:scaleX(0);
        transform-origin: right;
    }
    50%{
        transform:scaleX(1);
        transform-origin: right;
    }
    50.1%{
        transform:scaleX(1);
        transform-origin: left;
    }
    100%{
        transform:scaleX(0);
        transform-origin: left;
    }
}