JS 怎么动态设置CSS3动画的样式

JavaScript016

JS 怎么动态设置CSS3动画的样式,第1张

像这种效果,你要想知道,

已经下载下来,你拆开看一下就知道了。

说说原理,这里并不是纯css3,,只是用css3定义好动画,

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00}

25% {box-shadow: 0px 0px 8px #f00}

50% {box-shadow: 0px 0px 0px #f00}

100% {box-shadow: 0px 0px 8px #f00}

}

然后,js在切屏后,用Js来触发这一个样式,这个样式调用了刚才定义的动画。

.tips {

-webkit-animation:tips 1s

-moz-animation:tips 1s

}

当然css3是可以做的,只是用纯css3,就没办法像这样可以拖动切屏,这个是需要js或者jq来完成。。。

~如果你认可我的回答,请及时点击【采纳为满意回答】按钮

~~手机提问的朋友在客户端右上角评价点【满意】即可。

~你的采纳是我前进的动力

~~O(∩_∩)O,记得好评和采纳,互相帮助,谢谢。

CSS3的动画的优点:

1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)

2.代码相对简单

但其缺点也很明显:

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现(如滚动动画,视差滚动等)

JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧。

c3实现你这个需求很麻烦,建议你用JQ的animate:

$('el').animate({top: "-=20",right:"-=30"}, 600)

移不动请检查该元素是否有position:relative。

或者自己用js封装一个动画。