CSS动画的初步使用(好像比jQuery流畅)

最新推荐文章于 2020-10-14 16:46:16 发布

jasonjkj

最新推荐文章于 2020-10-14 16:46:16 发布

阅读量407

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/jasonjkj/article/details/78020980

版权

CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

       <style>
        /*1.定义动画*/
        @-webkit-keyframes myKey {
            0% {
                width: 100px;
            }
            5% {
                width: 200px;
            }
            100% {
                width: 300px;
            }

        }

        /*
        调用动画

            animation-name:  动画名称
            animation-duration:   一个周期时间（s/ms）
           animation-timing-function:  速度执行曲线
               linear 动画从头到尾的速度是相同的。
                ease   默认。动画以低速开始，然后加快，在结束前变慢。
                ease-in    动画以低速开始。
                ease-out   动画以低速结束。
                ease-in-out    动画以低速开始和结束。
                cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
           animation-delay:  延时；
           animation-iteration-count:动画播放次数；    取值： 指定数值\    \infinite(无限次)
           animation-direction:normal/alternate(轮播  来回来回  )          播放方向


        animation:name duration timing-function delay iteration-count direction;
         -webkit-animation:myMovie 30s linear 0s infinite normal;
        */
        p {
            animation: myKey 1s linear 0s infinite alternate;
        }

        p {
            background-color: grey;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<p></p>
</body>