十四、css动画基础知识

  • Post author:
  • Post category:其他




引用动画的方式:

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)

转载于:https://www.cnblogs.com/gunelark/p/7285582.html