css动画帧

1.动画帧

<style type="text/css">
                .box{
                    width: 500px;
                    height: 200px;
                    background-color: gold;
                    animation-name: fromLeftToRight;
                    animation-duration: 1s;
                    animation: fromLeftToRight .5s infinite;
                    animation-delay: 0s;
                    animation-timing-function: ease-in;
                }
                @keyframes fromLeftToRight{
                    from{
                        margin-left: 0;
                    }
                    to{
                        margin-left: 1300px;;
                    }
                }
                .pp{
                    width: 500px;
                    height: 200px;
                    background-color: blue;
                    animation-name: FromLeftToRight;
                    animation-duration: 1s;
                    animation: FromLeftToRight .5s infinite;  /*无限循环*/
                    animation-delay: 2s;
                }
                @keyframes FromLeftToRight{
                    from{
                        margin-left: 0;
                    }
                    to{
                        margin-left: 1300px;
                    }
                }
                .pi{
                    width: 500px;
                    height: 200px;
                    background-color: red;
                    animation-name: FromLeftToRight;
                    animation-duration: 1s;
                    animation: LeftToRight .5s infinite;
                    animation-delay: 4s;
                }
                @keyframes LeftToRight{
                    from{
                        margin-left: 0;
                    }
                    to{
                        margin-left: 1300px;;
                    }
                }
            </style>

 

动画帧

 

 

 

转载于:https://www.cnblogs.com/Johnon/p/5773339.html