HTML/CSS-プレミアム4編

*アニメーション(アニメーション)

ブラウザの描画順序

1.nder Treeの作成:css整理の参考資料
2.Layoutキャプチャ:仮想ボックスの作成(width、height、margin、padding...など)
3.シェーディング:ピクセルにシェーディング
4.複合処理:変換、不透明度などの処理
2番属性変更時に2、3、4番を再実行
3番属性変更時に3、4番属性を再実行
4番属性変更時に4番属性を再実行

高速変換の理由

1.transformは他のスレッドで処理されます.
2.ブラウザの描画順序は、最も遅い描画変換であるため、変換を変更すると、Webページの動作速度が速くなります.

詳細プロパティの変換

.box {
    transform: rotate(0~360deg);
    /* 0~360도 까지 회전 */
    transform: translateX(100px);
    /* X좌표 100px 이동 */
    transform: translateY(100px);
    /* Y좌표 100px 이동 */
    transform : scale(0~...);
    /* 0~원하는 숫자까지 배율 확대 */
    /* 굉장히 많은 효과 존재 */   
}

各種変換の確認
https://developer.mozilla.org/ko/docs/Web/CSS/transform

各種アニメーション効果

2.ANY-WAYアニメ

アニメーションのウォークスルー

*マウスを箱にぶら下げたまま左右に移動

コーディング方法

1.デフォルトのフレームとスタイルを適用する
html

<div class="textbox">
        <h4 class="ani-text">Hello</h4>
</div>   

css

.textbox {
    width: 300px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    background-color: bisque;
    box-sizing: border-box;
}
.ani-text {
    font-size: 30px;    
    text-align: center;
    padding-top: 25px;
}

2.アニメーションの適用時期をトリガー

css

.ani-text:hover {
    animation-name: moveon;
    /* moveon이라는 애니메이션을 적용한다 */
    animation-duration: 2s;
    /* 애니메이션이 한 사이클을 완료하는 데 소요 시간 : 2초 */
}

3.@キーフレームの作成

css

@keyframes moveon {
    0% {
        transform: translateX(0px);
    } /* 애니메이션이 0% 진행됬을때 상태 */
    34% {
        transform: translateX(-100px);
    } /* 애니메이션이 34% 진행됬을때 상태 */
    68% {
        transform: translateX(100px);
    } /* 애니메이션이 68% 진행됬을때 상태 */
    100% {
        transform: translateX(0px);
    } /* 애니메이션이 100% 진행됬을때 상태 */
}

*左右に揺れる動画

コーディング方法

1.デフォルトのフレームとスタイルを適用する
html

<button class="shakeBtn">흔들버튼</button>

css

.shakeBtn {
    padding: 15px 20px;
    font-size: 20px;
    background: skyblue;
    color: white;
    border: none;
    border-radius: 5px;
    display: block;
    margin: 30px auto;
    margin-top: 100px;
}

2.アニメーションの適用時期をトリガー

css

.shakeBtn:hover {
    animation-name: shake;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /* 반복실행 횟수 : 무제한 */
}

3.@キーフレームの作成

css

@keyframes shake {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
    75% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

*回転+サイズを大きくする

コーディング方法

1.デフォルトのフレームとスタイルを適用する
html

<div class="turnBtn">+</div>

css

.turnBtn {
    margin: 150px auto;
    text-align: center;
    font-size: 70px;
    width: 84px;
    cursor: pointer;
}

2.アニメーションの適用時期をトリガー

css

.turnBtn:hover {
    animation-name: turn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    /* 마지막 적용된 애니메이션 상태를 유지 */
}

3.@キーフレームの作成

css

@keyframes turn {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(45deg) scale(1.5);
    }
}

*スライドメニュー

コーディング方法

1.デフォルトのフレームとスタイルを適用する
html

<nav class="menuBar">
            <h4>menu</h4>
            <p>Item</p>
</nav>

css

body {
    margin: 0;
}
.menuBar {
    width: 200px;
    background: black;
    color: white;
    height: 100%;
    padding: 25px;
    position: fixed;
    z-index: 5;
    text-align: right;
    transition: all 1s;
    transform: translateX(-150px);
}
.menuBar p {
    text-align: center;
}

2.アニメーションの適用時期をトリガー

css

.menuBar:hover {
    transform: translateX(0px);
    text-align: center;
}
.menuBar:hover p {
    animation-name: slide;
    animation-duration: 1s;
}

3.@キーフレームの作成

css

@keyframes slide {
    0% {
        transform: translateX(-250px);
    }
    25% {
        transform: translateX(50px) skewX(-30deg);
    }
    100% {
        transform: translateX(0px);
    }
}