• 十四、css动画基础知识


    引用动画的方式:
     
    1、轻量动画:
    cubic-bezier(0.165, 0.840, 0.440, 1.000);//加上贝塞尔曲线使动画运动起来更加平滑
    2、.scrollNews,.m-treeview{transition:all 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000);overflow: hidden;}
    如何重复一个动画,一般需要在动画结束之后清楚动画,然后在需要加动画的地方再加上动画?
    //在动画结束之后清除动画
    $(".alert_p").on("webkitAnimationEnd",function(){
    if($(this).hasClass('fadeInUp')){
    $(this).removeClass("fadeInUp");
    }
    });
    如何让动画停在最后一帧?-----both   
    animation: fadeInUp 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.5s both;
    -webkit-animation: fadeInUp 2s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.5s both;
     
    一直以来我有一个疑惑:transition实现的效果到底是不是动画?
    这里说出自己的看法:
    • transition只是一个简单的过渡效果,并不能说是一个动画,这里说的过渡效果如:左-->右、上-->下、黑-->白,过渡方法建议使用我一个同事,后面简称宋老师,他是我的很好的一个同事带我入门,让我定位自己的方向,知道自己喜欢做什么~哈哈,闲话不多说了。。。 贝赛尔曲线:cubic-bezier(0.165, 0.840, 0.440, 1.000)
    • animation阐述的是一个动画的过程,里面有一个属性是动画的名字,这个动画的名字就是我们要定义的动画运动过程的实现,你可以定义任意时间的物体运动的轨迹,比如在10%时向下移动10px:transform:translate3d(0,10px,0)
  • 相关阅读:
    Vue的watch监听事件
    Vue路由-命名视图实现经典布局
    Vue中使用children实现路由的嵌套
    Vue中router两种传参方式
    mysql 压缩备份 压缩还原 命令
    【转】SVN branches trunk 合并 讲解
    svn 更新提交文件冲突
    mysql 导出表数据表结构
    利用jenkins打造通过自定义参数更新svn 指定文件任务
    centos 7 安装jira 破解
  • 原文地址:https://www.cnblogs.com/gunelark/p/7285582.html
Copyright © 2020-2023  润新知