cssでできるアニメーションで文字を動かそう。

ホーム
BLOG
css
cssでマウスをおいた時に動かそう

css
2019.07.01

cssでマウスをおいた時に動かそう

はじめに

リンクなどをマウスのポインターを乗せた時に文字が動いたり背景がゆっくり変わったりする物をよくみるのですが、どうやって作っているんですかね・・

それはマウスをおいた時の動作　hover を行った時に文字を動かしたり、背景を変えたりするクラスをjqueryで付与したり、cssで動きをつけたりしていますね。

cssでもマウスをhoverした時にアニメーションをつけることができるんですね。

cssでもアニメーションをつけることは可能ですね。今回は簡単なサンプルをふまえながらcssでアニメーションをつけていきましょう。

CSSでhoverした時に動かそう

今回は、cssでリンクをhover（マウスをリンクの上におく動作）した時に、アニメーションをつける方法について説明していきたいと思います。考え方としましては、hover前とhover後の動作にdelayをかけることで視覚的にアニメーションが発生しているように見えるように行います。

サンプルコード

HTML


<!DOCTYPE html>
<head>
  <title>cssでアニメーションをしよう</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<a class="link_sample1" href="">リンクの背景がゆっくり変化します。</a>
	<a class="link_sample2" href="">リンクの文字が１文字分だけゆっくりずれます。</a>
	<a class="link_sample3" href="">リンクの文字が横回転します。</a>
</body>
</html>

CSS


.link_sample1{
 transition:1s all;
}
.link_sample1:hover{
 transition:1s all;
 background:#ccc;
}
.link_sample2{
 transition:1s all;
}
.link_sample2:hover{
 padding-left:1em;
 transition:1s all;
}
.link_sample3{
 transition:1s all;
 display:inline-block;
}
.link_sample3:hover{
 transform:rotateY(360deg);
 transition:1s all;
}