十四、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)