div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: margin-left;*/
            /*transition-duration: 3s;*/

            /*1.告訴系統需要執行哪個動畫*/
            animation-name: lnj;
            /*3.告訴系統動畫持續的時長*/
            animation-duration: 3s;
        }
        /*2.告訴系統我們需要自己建立一個名稱叫做lnj的動畫*/
        @keyframes lnj {
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
 

這是最基本的寫法，需要自己定義動畫名稱，持續時間，以及動畫效果。

.過渡和動畫之間的異同 ：

不同點 ：過渡必須人為的觸發才會執行動畫 動畫不需要人為的觸發就可以執行動畫 

相同點： 過渡和動畫都是用來給元素新增動畫的 過渡和動畫都是系統新增的一些屬性 過渡和動畫都需要滿足三要素才會有動畫效果

下面是動畫模組的其他屬性：

 div {
            width: 100px;
            height: 50px;
            background-color: red;
            animation-name: sport;
            animation-duration: 2s;
            /*告訴系統多少秒之後開始執行動畫*/
            /*animation-delay: 2s;*/
            /*告訴系統動畫執行的速度*/
            animation-timing-function: linear;
            /*告訴系統動畫需要執行幾次*/
            animation-iteration-count: 3;
            /*告訴系統是否需要執行往返動畫
            取值:
            normal, 預設的取值, 執行完一次之後回到起點繼續執行下一次
            alternate, 往返動畫, 執行完一次之後往回執行下一次
            */
            animation-direction: alternate;
        }

div:hover{
            /*
            告訴系統當前動畫是否需要暫停
            取值:
            running: 執行動畫
            paused: 暫停動畫
            */
            animation-play-state: paused;
        }
 

/*
        通過百分比來實現動畫
         */
        @keyframes sport {
            0%{
                left: 0;
                top: 0;
            }
            25%{
                left: 300px;
                top: 0;
            }
            50%{
                left: 300px;
                top: 300px;
            }
            75%{
                left: 0;
                top: 300px;
            }
            100%{
                left: 0;
                top: 0;
            }
        }

 

.box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 100px auto;
            animation-name: myRotate;
            animation-duration: 5s;
            animation-delay: 2s;
            /*
           動畫是有一定的狀態的
            1.等待狀態
            2.執行狀態
            3.結束狀態
            */
            /*
            animation-fill-mode作用:
            指定動畫等待狀態和結束狀態的樣式
            取值:
            none: 不做任何改變
            forwards: 讓元素結束狀態保持動畫最後一幀的樣式
            backwards: 讓元素等待狀態的時候顯示動畫第一幀的樣式
            both: 讓元素等待狀態顯示動畫第一幀的樣式, 讓元素結束狀態保持動畫最後一幀的樣式
            */
            /*animation-fill-mode: backwards;*/
            /*animation-fill-mode: forwards;*/
            animation-fill-mode: both;
        }

動畫無限執行：

  ul{
            width: 2000px;
            height: 188px;
            background-color: black;
            animation: move 10s linear 0s infinite normal;/*連寫格式*/
        }
/*通過infinite*/