borderの伸縮を使ったCSSアニメーションサンプル集
CSSでborderが伸縮させるアニメーションのパターンサンプル集です。
このページでは、テキストの下線として表示するborderとして紹介していますが、ボーダーのみの要素作成などの場合も基本は同じですので応用はしやすいかと思います。
また、幅と高さ、背景色を利用して要素そのものをボーダーとして表現する方法などもありますが、このページでは紹介していません。
borderの長さを調節する基本
borderプロパティは、borderを指定した要素のwidthがその長さとなります。
例えば、displayプロパティがblockなどの要素では100％となり、displayプロパティがinlineの要素では他の要素がない限り0pxとなり表示されません。
borderの為に要素のwidthを可変すると、テキストなどの他の要素の表示領域にも影響するため、0または短い横幅を指定すると表示できなくなってしまいます。
その為、アニメーションの有無に関わらずborderのみのwidthを調節したい場合は「:before」や「:after」の疑似要素を使うか、border専用のHTML要素を作成する場合が多いと思います。
このページのサンプルではすべて、<p>タグにてテキストと一緒にしていますので、border部分は「:before」に記述しています。
中央から外へ広がる
中央から外側へ下線が広がるCSSアニメーションのサンプルです。
See the Pen CSS | border animation （from the center） by yochans (@yochans) on CodePen.
※右下のRerunボタンでリスタート再生できます
<p class="border">from the center</p>.border{
position: relative;
text-align: center;
font-size: 18px;
}
.border:before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
border-bottom: solid 2px #000;
transform: translateX(-50%);
animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}外側から中央へ縮む
外側から中央へ下線が短くなっていくボーダーのCSSアニメーションです。
サンプルでは、一定の長さで停止するようにしてあります。
See the Pen CSS | border animation （from outside to center） by yochans (@yochans) on CodePen.
※右下のRerunボタンでリスタート再生できます
<p class="border">from the center</p>.border{
position: relative;
text-align: center;
font-size: 18px;
}
.border:before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
border-bottom: solid 2px #000;
transform: translateX(-50%);
animation: border_anim 2s linear forwards;
}
@keyframes border_anim {
0%{
width: 100%;
}
100%{
width: 200px;
}
}左から右へ伸びる
右から左へ下線が伸びるボーダーのCSSアニメーションです。
See the Pen CSS | border animation （left to right） by yochans (@yochans) on CodePen.
※右下のRerunボタンでリスタート再生できます
<p class="border">from the center</p>.border{
position: relative;
font-size: 18px;
}
.border:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-bottom: solid 2px #000;
animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}右から左へ伸びる
左から右へ下線が伸びるボーダーのCSSアニメーションです。
See the Pen CSS | border animation （right to left） by yochans (@yochans) on CodePen.
※右下のRerunボタンでリスタート再生できます
<p class="border">from the center</p>.border{
position: relative;
text-align: right;
font-size: 18px;
}
.border:before{
content: '';
position: absolute;
left: 100%;
bottom: 0;
width: 0;
transform: translateX(-100%);
border-bottom: solid 2px #000;
animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}タブメニュー
borderのCSSアニメーションを利用して、選択時に下線となるボーダーが広がるタブメニューを作成してみました。
See the Pen CSS | border animation （right to left） by yochans (@yochans) on CodePen.
<div id="container">
<input type="radio" id="menu1" class="tab" name="menu" checked="checked" />
<label for="menu1">MENU1</label>
<div class="menu-contents">
吾輩は猫である。
</div>
<input type="radio" id="menu2" class="tab" name="menu" />
<label for="menu2">MENU2</label>
<div class="menu-contents">
吾輩も猫である。
</div>
<input type="radio" id="menu3" class="tab" name="menu" />
<label for="menu3">MENU3</label>
<div class="menu-contents">
吾輩は猫ではない。
</div>
</div>#container {
margin: 70px 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* radio btn */
.tab {
display: none;
}
/* label */
label{
position: relative;
margin: 0 26px;
padding: 4px;
font-size: 18px;
order:-1;
}
.tab:checked+label {
color: #4169e1;
}
.tab:checked+label:before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
transform: translateX(-50%);
border-bottom: solid 3px #4169e1;
animation: border_anim 0.3s linear forwards;
}
@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}
/* menu-contents */
.menu-contents {
margin: 30px;
width: 100%;
display: none;
}
.tab:checked+label+.menu-contents {
display: block;
}