css 动画

2021-09-09 10:00:53 作者：互联网

animation: 動畫名稱持續時間

@keyframe 動畫名稱 {
    from {
        CSS 屬性: 值
    }
    to {
        CSS 屬性: 值
    }
}
    @keyframes active {
        0% {
            opacity: 0;
            transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

　　2. transition: CSS屬性持續時間;

	div{
		    width: 200px;
		    height: 200px;
		    margin: 100px auto;
		    background-color: #336699;
		    
		    /*transition:width 1s;*/
		    transition:all 1s;
		    /*transition: height 1s;*/
		}
		div:hover{
		    width: 300px;
		    height: 400px;
        }

3.html简代demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        border: 1px solid blue;
        width: 100px;
        height: 40px;
        animation: active 1s linear 1;
    }

    @keyframes active {
        0% {
            opacity: 0;
            transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }


    #c1:checked~.box2 {
        margin-left: 50px;
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    .box2 {
        margin-left: 0px;
        height: 100px;
        width: 100px;
        background-color: #0a0;
        transition: 1s -.3s linear;
        visibility: visible;
        opacity: 1;
    }
</style>

<body>
    <button onclick='toggle()'>change</button>
    <div class="box1"></div>

    <br />
    <input id="c1" type="checkbox">
    <br />
    <br />
    <div class="box2"></div>
</body>

</html>

<script>
    function toggle() {
        curr = document.querySelector('div').style.display
        if (curr == 'display' || curr == '') {
            document.querySelector('div').style.display = 'none'
        } else {
            document.querySelector('div').style.display = ''
        }
    }
</script>

1:animation: 動畫名稱持續時間@keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 }} @keyframes active { 0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); } }

2:transition: CSS屬性持續時間;div{ width: 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; /*transition: height 1s;*/}div:hover{ width: 300px; height: 400px; }

标签：opacity,动画,1s,transition,height,width,div,css
来源： https://www.cnblogs.com/dming4/p/15245651.html