1. 程式人生 > >animation同時寫多個動畫,先執行一個再執行下一個

animation同時寫多個動畫,先執行一個再執行下一個

animation可以同時寫多個動畫,這裡只是給出一個例子,其實可以用一個動畫就能實現了

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

<head>
    <meta charset="utf-8">
    <style>
        .test{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .test:hover {
            animation:move2 1s ease,move1 1s ease 1s;
        }
        @keyframes move1{
            from {transform: scale(1.5) translateX(0)}
            to {transform: scale(1.5) translateX(100px)}
        }
        @keyframes move2{
            from {transform: scale(1)}
            to {transform: scale(1.5)}
        }
    </style>
</head>

<body>
    <div class="test">我是動畫</div>
</body>

</html>