CSS选择器过渡

 直接过渡

<style type="text/css">
        p{
            width: 20px;
            height: 20px;
            background-color: aqua;
        }
        p:hover{
            width:50px;
            height: 50px;
            background-color: blueviolet;
        }
    </style>

间接过渡

p:hover{
            width:50px;
            height: 50px;
            background-color: blueviolet;
            transition-delay: 500ms;
            transition-duration: 200ms;
        }

transition-delay 在过度前等待 500 ms

transition-duration 过渡效果持续 200ms

transtion-property  对应属性平滑过渡效果

 

transition-timing-function：属性规定过渡效果的速度曲线，value：ease、ease-in、ease-out

动画效果：

<style type="text/css">
        p{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        p:hover{
            animation-duration: 1000ms;
            animation-delay: 200ms;
            animation-name: ani1;
            animation-iteration-count: infinite;
        }
        @keyframes ani1 {
            to{
                width: 500px;
                height: 500px;
                background-color: chartreuse;
            }
        }
    </style>