zoukankan      html  css  js  c++  java
  • 十四、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)
  • 相关阅读:
    测分用例模板
    功能测试用例设计(24方法)
    pycharm
    Mac-peizhi
    基于Java BufferedImage实现识别图片中的黑色矩形
    Soap从入门到实战
    实列+JVM讲解类的实列化顺序
    基于Springboot的BaseService和BaseController
    Kendo-Grid for Vue API and Template
    web项目jsp中无法引入js问题
  • 原文地址:https://www.cnblogs.com/gunelark/p/7285582.html
Copyright © 2011-2022 走看看