• css3动画animate


    CSS3 动画

    通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

    @keyframes 定义动画关键帧:

    @keyframes animateName {
                0%    {
                    状态
                }
                100% {
                    状态
                }
            }
    @keyframes animateName {
                  from    {
                    状态
                }
                  to {
                    状态
                }
            }

    动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。

    from和to等同于0%和100%;0%表示动画的开始;100%表示动画的结束;

    @keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes;

    当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

    通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

    • 规定动画的名称
    • 规定动画的时长(默认为0)

    例如:

    <!doctype html> 
    <html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
        <style type="text/css">
            @keyframes tabList {
                0%    {
                     50px;
                    height: 50px;
                }
                50% {
                     100px;
                    height: 100px;
                }
    
                100% {
                     150px;
                    height: 150px;
                }
            }
    
            @-webkit-keyframes tabList{
                0%    {
                     50px;
                    height: 50px;
                }
                50% {
                     100px;
                    height: 100px;
                }
                100% {
                     150px;
                    height: 150px;
                }
            }
            .tablist{
                animation: tabList 3s;
                -webkit-animation: tabList 3s;
                background: red;
                 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div class="tablist"></div>
    </body>
    </html>

    当然对于状态的定义不局限于开始和结束两个时间点,我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点,也可以写入10%,20%,30%...根据需求挑时间点动画。

    CSS3 动画属性:

    当我们使用@keyframes定义好了一个动画,它并不会执行产生任何效果,直到我们通过animation属性将动画应用到相应元素上。

    对于 CSS3 animation 属性其完整的语法如下:

    animation: name duration timing-function delay iteration-count direction;

    • name是使用@keyframes定义好的关键帧名称
    • duration从字面意思可知是指定动画持续时间
    • timing-function 指定动画以何种方式播放,具体指的是从元素的一个状态过渡到另一个状态所使用的方式,可用的值有linear,ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
    • delay指定动画何时开始,默认为0;
    • iteration-count 指定动画重复次数,可以指定一个数字,也可以使用'infinite'表示一直播放。默认为1.
    • direction指定动画是否反向播放或者交替着播放,可用的值有normal, reverse, alternate, alternate-reverse

    另外还有一个属性非常有用,一般在js中控制其属性。animation-play-state:paused/running;具体参考:http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state

    其中name和duration 是必需的,如果不指定duration默认为0,也就是动画持续0秒,所以就无法看到动画效果。

    以上的例子.tablist使用@keyframes定义好的动画。

    参考:

      http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html

      http://www.w3school.com.cn/css3/css3_animation.asp

      http://www.w3schools.com/css/css3_animations.asp

  • 相关阅读:
    LeetCode OJ
    LeetCode OJ
    LeetCode OJ
    linux tips
    vim more
    vim basic
    cut
    paste
    uniq
    Linux的用户
  • 原文地址:https://www.cnblogs.com/floatboy/p/css3_animate.html
Copyright © 2020-2023  润新知