animation基础和写法

动画名称(name)--@keyframes
过渡时间duration延迟时间delay
时间函数timing-function
播放次数iteration-count
播放方向direction是否轮流播放和反向播放
停止播放的状态fill-mode
是否暂停play-state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画</title>
    <style>
        .box{
            margin: 10px;
            width: 260px;
            height: 260px;
            background-color: #0000ff;
        }
        .cell1{
            width: 50px;
            height: 50px;
            background-color: #ff00ff;
        }
        .cell1:hover{
            animation: moveX 2s linear 2;
        }
        @keyframes moveX {
           100%{
               transform: translateX(200px);
           }
        }

        .cell2{
            width: 50px;
            height: 50px;
            background-color: #ff00ff;
        }
        /*alter reverse*/
        .cell2:hover{
            animation: moveAlternate 2s linear infinite alternate;
        }
        @keyframes moveAlternate {
            100%{
                transform: translateX(200px);
            }
        }

        .cell3{
            width: 50px;
            height: 50px;
            background-color: #ff00ff;
        }
        /*alter reverse*/
        .cell3:hover{
            animation: moveAlternate 2s linear alternate forwards;
        }
        @keyframes moveAlternate {
            100%{
                transform: translateX(200px);
            }
        }

        .cell4{
            width: 50px;
            height: 50px;
            background-color: #ff00ff;
        }
        /*alter reverse*/
        .cell4:hover{
            animation: moveAlternate 2s linear alternate running;
        }
        @keyframes moveAlternate {
            100%{
                transform: translateX(200px);
            }
        }

        .jumpBox{
            width: 50px;
            height: 50px;
            background-color:orange;
            border: solid 1px black;
            border-radius:50% ;
            animation: jump 2s ease-in infinite;
        }
        @keyframes jump {
            0%{
                transform: translateY(0px);
            }
            40%{
                transform: translateY(100px);
            }
            50%{
                transform: translateY(100px);
            }
            100%{
                transform: translateY(0px);
            }
        }

    </style>
</head>
<body>
<div class="box ex1">
    <div class="cell1"></div>
    <div class="cell2"></div>
    <div class="cell3"></div>
    <div class="cell4"></div>
</div>
<div class="box ex2">
    <div class="jumpBox"></div>
</div>
</body>
</html>