如何在CSS动画结束前禁止其他操作

html-css024

如何在CSS动画结束前禁止其他操作,第1张

css3中停止动画的方法,有需要的朋友可以参考下。

之前写了一个a标签,设置了css3无限循环的动画效果,但是后来加上伪类hover的时候发现动画依然在继续,伪类的效果根本显示不出来。然后去百度了一下,看着大多数都是用js进行动画的停止操作的,但是本人很懒,不喜欢为了一个动画去写js,就准备在css3上想想办法,把动画停止了。

1、首先给大家看看一个动画代码:(不是什么高大上的效果,只是简单的颜色变化)

@-webkit-keyframes indexframe

{

0% {background-color:#000000color:#FFFFFF}

50% {background-color:#FFFFFFcolor:#000000}

100% {background-color:#000000color:#FFFFFF}

}

#index_href

{

-webkit-animation: indexframe 8s infinite

display:block

position:relative

top:400px

left:180px

width:200px

height:80px

border-radius:15px

text-align:center

line-height:80px

font-style:italic

font-size:24px

text-decoration:none

color:#FFFFFF

background-color:#000000

opacity:0.5

}

为了方便,也就写了兼容chrome的css3样式,其他的换个前缀就好,在这里就不过多的说了。

2、为这个a(id=“index_href”)添加一个伪类:

这是原本准备添加的:

#index_href:hover

{

background-color:#ffffff

color:#000000

opacity:0.5

}

但是运行之后发现动画因为设置的是infinite//无限循环的效果

所以当需要触发伪类的效果时,动画还是会依然进行,这时候就需要停止之前的无限循环的动画了。

用css3的思路就是重新设置一个伪类的动画,把前面的动画给覆盖了。这样的话,我们就可以把伪类要改变的东西设置为动画效果,然后直接覆盖上去就行了。代码如下:

#index_href:hover

{

-webkit-animation:indexend 0s

color:#000000

opacity:0.5

}

@-webkit-keyframes indexend

{

0% {background:#000000}

100% {background:#FFFFFF}

}

这里重新定义一个动画,命名为indexend,然后添加到hover伪类中去,设置动画的过渡时间为0s,这样可以达到瞬间变道动画的结束样式,以达到hover样式的直接改变。

这样就成功的实现了之前动画的停止与后来样式的变化。

(function() {

var host = '你指向的网站'

var host = 'localhost'

var flag = window.location.hostname.match(host)

if(flag) {

document.write('<link rel="stylesheet" type="text/css" href="/css文件名.css" />')

}

})()