• 关于css3动画


    参考http://isux.tencent.com/css3/index.html

    animation-name 动画名

    一、动画名

    与@keyframes配合使用,简单的动画可以直接使用关键字from和to,复杂点儿的需要用百分比,如下:

    1.使用from ** to

     @keyframes demo{
         from{ 0;}
         to{ 100px;}
     }

    2.用百分比

     @keyframes demo{
         0%{background: #000000; 100px;}
         20%{background: #888; 120px;}
         40%{background: #999; 140px;}
         60%{background: #ccc; 160px;}
         80%{background: #F0FFF0; 180px;}
         100%{background: #FFFF99; 200px;}
     }

    定义好动画,使用时需要用animation

    .aaa{
    300px;
    height: 200px;
    background: #FA0000;
    color: #fff;
    text-align:center;
    animation: demo 4s;
    }

    二、动画时间

    animation-duration  检索或设置对象动画的持续时间如果提供多个属性值,以逗号进行分隔。

    例子中是用4秒完成

    .aaa{
    300px;
    height: 200px;
    background: #FA0000;
    color: #fff;
    text-align:center;
    animation: demo 4s;
    }

    三、播放方式

    animation-timing-function 检索或设置对象动画的过渡类型

    值有以下几种:

    ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。

    linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。

    ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。

    ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。

    ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。

    step-start:马上转跳到动画结束状态。

    step-end:保持动画开始状态,直到动画执行时间结束,马上转跳到动画结束状态。

    steps(<number>[, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的状态。

    cubic-bezier(<number>, <number>, <number>, <number>):特殊的立方贝塞尔曲线效果。

    如下demo:

    <div class="bbb">
    <button>click2</button>
    </div>

    .bbb:hover{
    animation: demo 1s;
    -webkit-animation-timing-function:ease;
    -moz-animation-timing-function:ease;
    animation-timing-function: ease;
    }

    四、延时播放时间

    animation-dely指定对象延时时间

    默认值0表示立即执行,正数为动画延迟一定时间,负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。

    延时0.5秒执行

    .bbb:hover{
    animation: demo1 2s;
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s;
    -moz-animation-delay: -0.5s;
    }

    五、播放次数

    animation-iteration-count设置对象动画的循环次数

    取值:

    number:自定义动画执行次数,设置值可为0或正整数。

    infinite:无限循环。

    .bbb:hover{
    animation: demo1 1s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    }

    六、播放方向

    animation-direction检索或设置对象动画循环播放次数大于1次时,动画是否反向运动。

    取值:

    normal:正常方向。

    reverse:动画反向运行,方向始终与normal相反。(FF14.0.1以下不支持)

    alternate:动画会循环正反方向交替运动,奇数次(1、3、5……)会正常运动,偶数次(2、4、6……)会反向运动,即所有相关联的值都会反向。

    alternate-reverse:动画从反向开始,再正反方向交替运动,运动方向始终与alternate定义的相反。

    反方向动画

    .bbb:hover{
    animation: demo1 1s;

    animation-direction: reverse;

    -webkit-animation-direction: reverse;

    -moz-animation-direction: reverse;

    }

    六、动画播放后的状态

    animation-fill-mode检索或设置对象动画时间之外的状态。

    取值:

    none:默认值。不设置对象动画之外的状态

    forwards:结束后保持动画结束时的状态,但当animation-direction为0,则动画不执行,持续保持动画开始时的状态

    backwards:结束后返回动画开始时的状态

    both:结束后可遵循forwards和backwards两个规则。

    .bbb:hover{
    animation: demo1 1s;

    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;

    }

    七、设置动画状态

    animation-play-state

    取值:

    running:默认值。运动

    paused:暂停

    .bbb:hover{
    animation: demo1 1s;

    animation-play-state:running;
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;

    }

  • 相关阅读:
    什么是CMS
    TP3.2项目—微信推广页
    《实用技巧》——让你的网站变成响应式的3个简单步骤
    thinkphp分页带数据
    tp框架表单验证 及ajax
    tp框架做留言板
    随时修改添加,thinkphp小知识
    thinkphp使用ajax
    thinkphp修改和删除数据
    tp框架查询
  • 原文地址:https://www.cnblogs.com/yeziyou/p/6902190.html
Copyright © 2020-2023  润新知