CSS3 keyframe和事件触发的问题

html-css022

CSS3 keyframe和事件触发的问题,第1张

首先 rotateX(180deg)//要加上度单位

#test:hover #tri{-webkit-animation:name 1s}//name随便取 时间随便 前边要加上浏览器引擎

-webkit- google 等

-o-opera 等

-moz-firefox 等

-ms- IE 等 ie>=10

动画如下:也要加上对应的浏览器引擎例:

@-webkit-keyframes name{ from { perspective(800px) rotateX(0deg)} to { perspective(800px) rotateX(180deg)} }

//加上 perspective 才具有3D效果

两个animation的类名调用，相当于你这个标签中同时出现了animation属性，那么应该就是会后面一个className覆盖了前面一个className中的animation，所以，你看到的就是一个动画效果。

如果你希望两个效果是同时存在的话，那么你可以在一个keyframes中把动画效果都写上，比如你的neon2这个类是from、to的形式，而shake-horizontal是从0到100的形式，那么就结合一下，都用0到100的形式来处理，放在一个className中。

如果是有先后顺序，后面可能会用到其中一个，而你又不想重写，只是想临时调用的话，那么就只有通过setTimeout的方式，在第一个animation结束之后把这个className给remove了，同时再addClass第二个动画效果进来。

var getKeyFramse = function(index){

var styleSheet = document.styleSheets[index], keyframesRule = []

[].slice.call(styleSheet.cssRules).forEach(function(item){

if (item.type === CSSRule.WEBKIT_KEYFRAMES_RULE) {

keyframesRule.push( item )

}

})

return keyframesRule

}