アニメーションの原理
FPS = 60, 60フレームが1秒間に再生され、1秒間のアニメーションとなります。
ブラウザレンダリングの原則
HTMLとCSSを受け取った後、ブラウザは何をしますか？
- HTMLからHTMLツリーを構築
- CSSに基づくCSSツリーの構築
- 2つのツリーを1つのレンダリングツリーに結合
- Layout
- Paint
- Compose
スタイルの更新方法
通常、スタイルを更新するにはJSを使用します。
div.style.background="red"実際には、通常はこのようには書きません。div.style.display="none"div.classList.add("red")- div.remove()ノードを直接削除します。
種類のレンダリング方法
- JS/CSS > スタイル > レイアウト > 描画 > 構成
- JS/CSS > > >
- JS/CSS > >
更新方法
- JS/CSS > Style > Layout > Drawing > Compositionの順に、例えばdiv.remove()のように、全てに目を通します。
- JS/CSS > スタイル > 描画 > 合成（背景色の変更など
- JS/CSS > スタイル > 合成（トランスフォームの変更など
属性がどのようにレンダリングされるかを確認するには、いくつかのステップを踏みます。
transformこの属性は
translate
元素の置換に使用
div:hover {
transform:translateX(100px);
}
マウスを要素の上に置くと、要素がX方向に100ピクセル移動します。
transform:translateZ(100px); の使い方を説明してください。
scale
要素の拡大縮小
div:hover {
transform:scale(1.5);
}
エレメントが元の1.5倍に
rotate
エレメントの回転
div:hover {
transform:rotate(45deg);
}
エレメントは時計回りに45°回転
傾き
CSSアニメーションの例：心臓の鼓動
コード表示
主に使用される属性 transform、position、transition
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="love">
<div class="left">
</div>
<div class="right">
</div>
<div class="bottom">
</div>
</div>
</body>
</html>
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.love {
margin:100px;
position: relative;
transition:all 1s;
display:inline-block;
}
.love:hover {
transform:scale(1.2);
}
.love>.left {
height:100px;
width:100px;
position: absolute;
bottom:100px;
right:100px;
transform:rotate(45deg) translate(90px);
border-radius:50px;
background-color:red;
}
.love>.right {
height:100px;
width:100px;
position: absolute;
bottom:100px;
left:100px;
transform:rotate(-45deg) translate(-90px);
border-radius:50px;
background-color:red;
}
.bottom {
height:100px;
width:100px;
left:0;
top:0;
transform:rotate(45deg);
background-color:red;
}
transitionプロパティ
機能：補完中間フレーム
使い方transition:属性名 duration transition mode delay;
