PcTravelJouonal
普段、仕事やプライベートで使っているパソコンについてまとめてみました。

[HTML・CSS]cssでアニメーションの速度を設定する方法

2020/12/19

HTML・CSS

今回は、cssでアニメーションの速度を設定する方法について紹介したいと思います。

アニメーションの速度を設定する事により、人間が見ていて違和感のないサイトにすることが出来ます。

結論から言うと

transition: 0.3s;

をcssで設定してあげるだけです。

サンプルプログラム

<div class='sample'>
テスト
</div>
<style>
.sample{
transition: 0.3s;
background-color:red;
}
.sample:hover{
background-color:blue;
}
</style>
テスト

HTML・CSS

, , , , , ,

おすすめ記事

2020/12/17

[HTML・CSS]ボタン(要素)に影を付ける方法

HTML・CSS

今回は、サイトを作成する際にボタン等の要素に影を付ける方法について紹介したいと思います。 結...

Read more...

2020/10/31

[HTML・CSS]fontawesomeを使ってアイコンを表示する方法

HTML・CSS

今回は、htmlを用いてサイトを構築する際に簡単にアイコンを表示させる方法について今回は、紹介した...

Read more...

2020/06/13

[HTML・CSS]サイトをスマホ・タブレット・PCごとに設定する方法

HTML・CSS

今回は、画面のサイズ(スマホ・タブレット・PC)ごとにCSSを設定する方法について紹介したいと思い...

Read more...

2020/07/27

[HTML・CSS]背景色でグラデーションにする方法

HTML・CSS

今回は、HTML・CSSにおいて背景色をグラデーションにする方法について紹介したいと思います。 ...

Read more...

2020/07/11

Twitterでリンクをおしゃれに設定するための方法(Twitterカード)

HTML・CSS

今回は、TwitterでURLをつぶやいた時にそのURLに画像等を付けるための機能(Twitter...

Read more...