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

最新推荐文章于 2021-08-04 09:17:03 发布

原创最新推荐文章于 2021-08-04 09:17:03 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用CSS定义和调用动画的方法。通过一个具体的例子展示了如何设置动画的关键帧、周期时间、速度曲线等属性，并解释了这些属性对动画效果的影响。

       <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>