こんにちは！
最近財布を変えました、paulsmithの財布にしたんですがめちゃめちゃかっこよくて何か支払いの時に少しばかりテンションが上がります。
支払いでウキウキしているのですが、中身は減っていく一方なので嬉しいのか悲しいのかわかりません。
今回は、調べてみて面白そうだったのでCSSアニメーションを触ってみようと思います。
自分的にはCSSはWEBサイトの装飾などデザインを描くものっていうイメージが強くて、動きをつけるってなるとJavaScriptの印象が強いです。
調べてみるとCSSだけでもWEBサイト内に動きをつけることができるのでそれの中から自分が面白いや使えそうと思ったことを書いていきます。
スライドイン
まず最初に、スライドして文字が出てくる動きです。
HTML
<p class="text__slideIn">COOSY</p>CSS
.text__slideIn {
animation: slideIn 1.6s;
}
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}これで、文字が横からスライドして出てきます。「infinite」をanimationのところにつけると永遠とこの動作を繰り返してくれます。
動きのあるサイトってもっと描くものかと思っていたので、想像以上に少なくてびっくりです。
ナビに下線をつける
次はナビをホバーした時につける下線に動きをつけるプログラムです。
HTML
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">MAIN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>CSS
li {
list-style: none;
margin: 10px 0;
}
a {
display: inline-block;
text-decoration: none;
position: relative;
overflow: hidden;
color: #000;
}
a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
/*線の太さ*/
background-color: #000;
transform: translate(-100%, 0);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}
a:hover:after {
transform: translate(0, 0);
}これはさまざまなサイトで使えると思います。このブログのナビ部分はホバーすると色が変わる設定ですが、この機能なら色などの景観を損なわずにホバーしたとわかりやすく見せることができるので、良いなと思いました。
今回は触りということだったので2つ紹介しました。
CSSアニメーションを少し調べて触ってみましたが、思っていたより簡単でなんと言っても楽しい！って思いました。これを機に色々と調べてもっと知識を増やしていこうと思います。
最後まで読んでいただきありがとうございました！
