jquery绑定 css3 animation-keyframes关键帧动画

2019独角兽企业重金招聘Python工程师标准>>>

【前言：】

基本上很少动画是需要在页面加载的时候就执行的，所以此例子是 将css3的 animation-keyframes关键帧动画，在btn按钮点击后去追加样式名称，从而达到动画开始播放的效果。

【实现步骤：】

1，样式定义：box的初始模样；

2，样式定义：box-round的样式，此处绑定keyframes；

3，样式定义：关键帧keyframes做好动画执行的属性变化；

4，js按钮绑定：做box样式的追加样式 box-round。
 

【图示：】

【代码如下：】

<script language="javascript" src="http://resunnet.com/js/jquery-1.7.1.min.js"></script>
<script>
  $(function(){
	    $(".btn").click(function(){
			
			$(".box").addClass("box-round")
			
			})
	  })
</script>

/*关键帧动画*/
@-webkit-keyframes 'box-animation' {
   from {
	 background: red;
	 color: red;
	 border-radius: 30px;
	 }
  
   50% {
	background: blue;
	color: orange;
	border-radius: 100px;
 }
   to {
   background: orange;
   color: blue;
   border-radius: 30px;
  }
  
}

/*初始化box的模样*/
.box{
	  width:200px; 
	  height:200px; line-height:200px; text-align:center;
	  background:#F90;
	  font-size:12px;
     /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/
}
	
/*此处样式被js所追加*/  
.box-round{
	  -webkit-animation-name: "box-animation"; /*动画名称，需要跟@keyframes定义的名称一致*/
	  -webkit-animation-duration: 2s;/*动画持续的时间长*/
	  -webkit-animation-iteration-count: infinite;/*动画循环播放的次数-infinite无限次 可取数值*/
}

/*按钮*/
.btn{ width:100px; height:32px; text-align:center; background:#66C; color:#fff; font-size:14px; line-height:32px;}

<div class="box">动画变形</div>

<div class="btn">按钮</div>

【延伸问题：】

如何做鼠标感应后动画执行？

只需要给box 追加一个 .box：hover 样式即可

/*关键帧动画*/
@-webkit-keyframes 'box-animation' {
   from {
	 background: red;
	 color: red;
	 border-radius: 30px;
	 }
  
   50% {
	background: blue;
	color: orange;
	border-radius: 100px;
 }
   to {
   background: orange;
   color: blue;
   border-radius: 30px;
  }
  
}

/*初始化box的模样*/
.box{
	  width:200px; 
	  height:200px; line-height:200px; text-align:center;
	  background:#F90;
	  font-size:12px;
     /*调用animation属性，从而让按钮在载入页面时就具有动画效果*/
}
	
/*此处样式---->为感应后调用动画过程*/  
.box:hover{
	  -webkit-animation-name: "box-animation"; /*动画名称，需要跟@keyframes定义的名称一致*/
	  -webkit-animation-duration: 2s;/*动画持续的时间长*/
	  -webkit-animation-iteration-count: infinite;/*动画循环播放的次数-infinite无限次 可取数值*/
}

 

转载于:https://my.oschina.net/u/583531/blog/755815