以前はjavascriptが無ければアニメーションできないこともありましたが、今ではCSSのみで設定できる便利な世の中になりました。
ということで今回はCSSでつくる基本的なリンクアニメをメモします。
リンクの下線アニメーション
よく見かけるテキストリンクの下線がアニメででてくるCSSです。
text-decorationではできないので疑似要素を使って表現します。
HTML
<div class="link-anime-1"> <a href="#">TOP</a> <a href="#">ABOUT</a> <a href="#">SERVICE</a> <a href="#">WORKS</a> <a href="#">CONTACT</a> </div>
CSS
.link-anime-1>a {
display: inline-block;
position: relative;
overflow: hidden;
color: #222;
text-decoration: none;
font-size:16px;
margin-right:20px;
}
.link-anime-1>a:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #222;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
content: "";
}
.link-anime-1>a:hover:after {
transform: translate(0, 0);
}
親要素のaにはdisplay: inline-block;を設定します。display:block;だとテキスト部分以外もリンク対象になってしまうので。
ポイントはtransform: translate(-100%, 0);。疑似要素のところで下線を隠します。ホバーしてtransform: translate(0, 0);で元の位置に戻します。
ポイントはtransform: translate(-100%, 0);。疑似要素のところで下線を隠します。ホバーしてtransform: translate(0, 0);で元の位置に戻します。
ボタンのスライドアニメーション
ホバーすると別の背景が左からアニメーションされるやつです。
HTML
<div class="link-anime-2"> <a href="#"><p>VEIW MORE</p></a> </div>
CSS
.link-anime-2>a {
display: block;
width: 350px;
padding: 20px 0;
border-radius: 50px;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
to right,
#FBFE00 0%,
#FBFE00 50%,
#000 50%,
#000 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 16px;
position: relative;
}
.link-anime-2>a p:before {
content: "";
position: absolute;
top:43%;
right: 10%;
width: 8px;
height: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
transition: 0.3s ease;
}
.link-anime-2>a:hover {
background-position: 0 0;
color:#000;
}
.link-anime-2>a:hover p:before {
border-top: 1px solid #000;
border-right: 1px solid #000;
right: 8%;
}
グラデーション設定であるbackground-image: linear-gradient;で左側の背景が#FBFE00、右側の背景が#000にします。background-size: 200% auto;で背景の大きさを要素の幅の2倍に設定します。background-position: 100% 0;で通常時は右側の#000だけが見えるようにずらし、ホバー時には背景の位置を0 0に戻します。
ボタンの拡大アニメーション
好きなホバーアクションのひとつです。
ホバー時にボタンが広がるアニメーションです。
ホバー時にボタンが広がるアニメーションです。
HTML
<div class="link-anime-3"> <a href="#"></a> </div>
CSS
.link-anime-3>a {
box-sizing: border-box;
display: block;
position: relative;
width: 100px;
height: 100px;
border: solid 4px #000;
border-radius: 50%;
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
}
.link-anime-3>a:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0, 0);
transition: transform ease 0.4s;
}
.link-anime-3>a:hover:after {
background-color:#FBFE00;
transform: translate(-50%, -50%) scale(1.1, 1.1);
}
.link-anime-3>a:before {
content: "";
position: absolute;
z-index: 10;
top: 45%;
left: 50%;
width: 20px;
height: 20px;
border-style: solid;
border-color: #000;
border-width: 6px 0 0 6px;
transform: translate(-50%, -50%) rotate(-135deg);
transition: 0.3s ease;
}
.link-anime-3>a:hover:before {
border-color: #222;
top: 50%;
left: 45%;
transform: translate(-50%, -50%) rotate(135deg);
transition: 0.3s ease;
}
通常見えているのはa要素だけで、ホバー時に中心から広がってくる部分は:afterで作成します。
a要素にはposition: relative;を指定した上で初期表示を設定します。afterはposition: absolute;でa要素の中心に円を設定しますが、transformで非表示にします。
transform: translate(-50%, -50%) scale(0, 0);
その上でhover時にafterが見えるように。scale(1.1, 1.1);にします。
transform: translate(-50%, -50%) scale(1.1, 1.1);
注意点としてhover時にscale(1.1, 1.1)だけ設定しても機能しません。
必ずtranslate(-50%, -50%)も含めて設定しましょう。
必ずtranslate(-50%, -50%)も含めて設定しましょう。
今後色々と応用していきたいと思います！
