CSSアニメーション：縁を走る三角

投稿日：2023年05月10日 13時09分10秒
更新日：2023年05月26日 10時31分39秒

最初に

CSSアニメーションですが、トリガーにJSを使用しています。

test

デモ

説明・補足・注意事項

開封するようなアニメーションと定期的に縁を動くアニメーションです。

アニメーションの移動は最短ルート（直性）移動のため、工夫しないと端に背景が見えてしまいます。
そのための工夫として、見えないところに頂点を置いて四角にし、見えない点を動きの間に高速で移動させています。

例えば、moveTriangleTopの以下コード

13% {
clip-path: polygon(0% 0%, 0% -35% , 100% 0% , 100% 35%);
}
13.1% {
clip-path: polygon(0% 0%, 100% -35% , 100% 0% , 100% 35%);
}

二つ目の点を一瞬で左端から右端に移動させています。
これをしてから他の点が動くことで端に隙間が空いて背景が見えてしまうことを防いでいるのです。

HTML

<div id="running-triangle-box">
    <div class="animation running-triangle top"></div>
    <div class="animation running-triangle bottom"></div>
</div>

説明

動いて欲しい範囲（縁）を親要素にして、三角形にするdivブロックを作成します。

CSS：初期設定

#running-triangle-box{
    position: relative;
    width: 300px;
    height:300px;
    overflow: hidden;
}
#running-triangle-box > *{
    position: absolute;
    top:0;
    left:0;
}

.running-triangle{
    width:100%;
    height:100%;
    background-color: rgba(0, 50, 100, 0.7);
}
.running-triangle.top{
    clip-path: polygon(0% 35%, 0% 0% , 100% -35% , 100% 0%);
}
.running-triangle.bottom{
    clip-path: polygon(100% 65%, 135% 100% , 0% 135%, 0% 100%);
    bottom:0;
    top:unset;
}
/**
 *  アニメーション関係
 **/

.animation{
    animation-duration: 2.5s; /* 2 */
    animation-fill-mode: forwards;
}

説明

親要素は「position: relative;」を指定し、三角にするdivブロックには「position: absolute;」を指定し、width/heightともに100%で全体を覆うようにします。

今回の場合は上下に三角を作りたかったため、下の三角には「bottom:0;top:unset;」を指定しています。

あとアニメーション設定も忘れないように。

CSS：開封アニメーション

.animation.running-triangle.top.opendEntry{
    animation-name: opendEntryTriangleTop;
}

@keyframes opendEntryTriangleTop {
    0% {
        clip-path: polygon(0% 100%, 0% 100% , 100% 100% , 100% 100%);
    }
    30% {
        clip-path: polygon(0% 100%, 0% 100% , 100% 100% , 100% 0%);
    }
    50% {
        clip-path: polygon(0% 0%, 0% 100% , 100% 35% , 100% -0%);
    }
    70% {
        clip-path: polygon(0% 35%, 0% 0% , 100% -35% , 100% 0%);
    }
    100% {
        clip-path: polygon(0% 35%, 0% 0% , 100% -35% , 100% 0%);
    }
}

.animation.running-triangle.bottom.opendEntry{
    animation-name: opendEntryTriangleBottom;
}

@keyframes opendEntryTriangleBottom {
    0% {
        clip-path: polygon(0% 0%, 0% 0% , 100% 0% , 100% 0%);
    }
    30% {
        clip-path: polygon(0% 100%, 0% 0% , 100% 0% , 100% 0%);
    }
    50% {
        clip-path: polygon(0% 100%, 0% 65% , 100% 0% , 100% 100%);
    }
    70% {
        clip-path: polygon(0% 100%, 0% 100% , 100% 100% , 100% 65%);
    }
    100% {
        clip-path: polygon(0% 100%, 0% 100% , 100% 100% , 100% 65%);
    }
}

説明

開封アニメーションです。

opnedEntryクラスはJSで付与/削除します。

CSS：縁を走るアニメーション

.animation.running-triangle.top.active{
    animation-name: moveTriangleTop;
}

@keyframes moveTriangleTop {
    0% {
        clip-path: polygon(0% 35%, 0% 0% , 100% -35% , 100% 0%);
    }
    13% {
        clip-path: polygon(0% 0%, 0% -35% , 100% 0% , 100% 35%);
    }
    13.1% {
        clip-path: polygon(0% 0%, 100% -35% , 100% 0% , 100% 35%);
    }
    30% {
        clip-path: polygon(65% 0%, 100% 0% , 135% 100% , 100% 100%);
    }

    75% {
        clip-path: polygon(65% 0%, 100% 0% , 135% 100% , 100% 100%);
    }
    85% {
        clip-path: polygon(100% 0%, 135% 0% , 100% 100% , 65% 100%);
    }
    85.1% {
        clip-path: polygon(100% 0%, 135% 100% , 100% 100% , 65% 100%);
    }
    100% {
        clip-path: polygon(100% 65%, 100% 100% , 0% 135%, 0% 100%);
    }
}

.animation.running-triangle.bottom.active{
    animation-name: moveTriangleBottom;
}

@keyframes moveTriangleBottom {
    0% {
        clip-path: polygon(100% 65%, 100% 100% , 0% 135%, 0% 100%);
    }
    30% {
        clip-path: polygon(100% 65%, 100% 100% , 0% 135%, 0% 100%);
    }
    40% {
        clip-path: polygon(100% 100%, 100% 135%, 0% 100%, 0% 65%);
    }
    40.1% {
        clip-path: polygon(100% 100%, 0% 135%, 0% 100%, 0% 65%);
    }
    50% {
        clip-path: polygon(35% 100%, 0% 100%, -35% 0%, 0% 0%);
    }
    
    75% {
        clip-path: polygon(0% 100%, -35% 100%, 0% 0%, 35% 0%);
    }
    75.1% {
        clip-path: polygon(0% 100%, -35% 0%, 0% 0%, 35% 0%);
    }
    100% {
        clip-path: polygon(0% 35%, 0% 0% , 100% -35% , 100% 0%);
    }
}

説明

縁を移動するアニメーションです。

activeクラスはJSで付与・削除します。

JS

window.addEventListener('load', function(){

	let domTriangles = document.querySelectorAll(".animation.running-triangle");

	domTriangles.forEach((domTriangle)=>{
	    domTriangle.classList.add("opendEntry");
	    window.setTimeout(() => {domTriangle.classList.remove("opendEntry");}, 2500);
	    
	    setInterval(() =>{
		    domTriangle.classList.add("active");
		    window.setTimeout(() => {domTriangle.classList.remove("active");}, 2500);
	    }, 5000); //window.setTimeout("kvAnimetion()", 2500);
	    
	});
	
});