• 十四、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)
  • 相关阅读:
    就这样吧
    搞了个1.0版本,名字和预定的一样改成OIFaQ了
    算了,总结一下教训
    我刚经历了人生中第一次版本回滚,目前感觉良好,请党和人民放心
    这有点爽的
    我决定出1.0的时候改名叫OIFaQ
    换个SSD把D盘弄飞了
    算是交代一下这三天的空白
    构建之法读书笔记03
    构建之法读书笔记02
  • 原文地址:https://www.cnblogs.com/gunelark/p/7285582.html
Copyright © 2020-2023  润新知