<commit_before>#活动专题动画#
----
动画继承`animate.less`

1. 安装`Koala` less编译器,也可以使用`grunt`,`gulp`工具。
2. `import`导入`animate.less`文件
3. 用`javascript`控制动画。
4. 动态效果名称参照[http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)

##实战##

1. 新建一个`activity.less`文件，比如在新活动`tpl\static\css\activity\14\13\01`目录下
2. 把`01`文件夹拖到`koala`的项目栏。
3. 修改`activity.less`,编译一次`activity.less`后面不用再操作了。

		// activity.less
		@import '../../../../less/animate.less';
		
		.animated{
			.animated;
		}
		
		.bounceOutLeft{
			.bounceOutLeft;
		}
		.flip{
			.flip;
		}
		
		#logo{
			color: orange;
			.animated;
			.bounceInDown;
		}

html代码:

		<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
			<link rel="stylesheet" href="activity.css">
		
			<style>
				#title{
					position: absolute;
					top: 30%;
					left: 30%;
					color: orange;
		
					-webkit-animation-duration: 3s;
					-webkit-animation-delay: 1s;
				}
		  	</style>
		</head>
		<body>
			<h1 id="logo">星美国际电影影城</h1>
		  		<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
		  		<script>
		  			(function($){
		  				$("#title").addClass("animated flip")
		  							.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
		  								$(this).removeClass();
		  							});
		  			})(jQuery);
		  		</script>
		</body>
		</html>


**源码**
[https://github.com/tomieric/iui/tree/master/test/less/animate.css](https://github.com/tomieric/iui/tree/master/test/less/animate.css)<commit_msg>'update'<commit_after>#活动专题动画#
----
动画继承`animate.less`

1. 安装`Koala` less编译器,也可以使用`grunt`,`gulp`工具。
2. `import`导入`animate.less`文件
3. 用`javascript`控制动画。
4. 动态效果名称参照[http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/)

##实战##

1. 新建一个`activity.less`文件，比如在新活动`tpl\static\css\activity\14\13\01`目录下
2. 把`01`文件夹拖到`koala`的项目栏。
3. 修改`activity.less`,编译一次`activity.less`后面不用再操作了。

		// activity.less
		@import '../../../../less/animate.less';
		
		.animated{
			.animated;
		}
		
		.bounceOutLeft{
			.bounceOutLeft;
		}
		.flip{
			.flip;
		}
		
		#logo{
			color: orange;
			.animated;
			.bounceInDown;
		}

html代码:

		<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
			<link rel="stylesheet" href="activity.css">
		
			<style>
				#title{
					position: absolute;
					top: 30%;
					left: 30%;
					color: orange;
		
					-webkit-animation-duration: 3s;
					-webkit-animation-delay: 1s;
				}
		  	</style>
		</head>
		<body>
			<h1 id="logo">星美国际电影影城</h1>
		  		<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
		  		<script>
		  			(function($){
		  				$("#title").addClass("animated flip")
		  							.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
		  								$(this).removeClass();
		  							});
		  			})(jQuery);
		  		</script>
		</body>
		</html>


**源码**
[https://github.com/tomieric/iui/tree/master/test/less/animate.css](https://github.com/tomieric/iui/tree/master/test/less/animate.css)

[在线预览demo](http://ginosin.esy.es/animate.css/)
{'fraction_non_alphanumeric': 0.19753086419753085, 'fraction_numerical': 0.017727128838239948, 'mean_word_length': 2.8072289156626504, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4911831', 'n_tokens_mistral': 1657, 'n_tokens_neox': 1415, 'n_words': 164}