CSS3トランジション遷移

SS3のtransition属性の詳しい説明:
この章ではアニメーションに関係する属性でもあるtransition属性の使い方を紹介します。
1. 基礎知識:
transition は中国語に翻訳すると「遷移」を意味し、要素の CSS 属性値を一定時間内に滑らかに遷移させることができます。
この属性は、境界線、背景、その他の属性と同様の複合属性です。
文法構造:

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

パラメータの説明:
1.transition-property: トランジションに参加するプロパティを設定または取得します。
2.transition-duration: オブジェクトの遷移の継続時間を取得または設定します。
3.transition-timing-function: オブジェクト内のトランジションのアニメーションタイプを取得または設定します。
4.transition-delay: オブジェクト遅延遷移の時間を取得または設定します。
コード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
  -moz-transition:width 2s;
  -webkit-transition:width 2s;
  -o-transition:width 2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上記のコードは、2 秒以内にアニメーション効果を付けて div の幅を 100px から 500px に設定する方法を示しています。
複合属性なので属性を個別に設定するのが自然です

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; -webkit-transition:width 2s; -o-transition:width 2s; } #thediv:hover{ width:500px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

提出するリセットコード

自動運転