回転する四角形

4241 ワード


<html>
    <head>
        <meta charset="utf-8">
        <title>   title>
    head>
    <style media="screen">
        .demo{
            width: 100px;
            height: 100px;
            background: rgb(135, 219, 18);
            /*    :  ,    ,    ,    ,              (           )*/
            animation-name: ani1;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier();
            animation-fill-mode: forwards;
        }
        /*    */
        @keyframes ani1 {
            /*    */
            0%{
                transform: translateX(0) rotate(0);
            }
            /*    */
            100%{
                transform: translateX(900px) rotate(720deg);

            }
        }
    style>
    <body>
        <div class="box">
            <div class="demo">div>
        div>
    body>
html>