利用data-*属性与jq写动画

1.首先是html里的内容；

data-animate里写的是json；

<div class="one">
	<div class="ani" data-animate='{"name":"bounce","duration":"1s","timing":"linear"}'>我是第一个</div>
</div>

2.通过脚本json遍历出来，实现动画效果

<script type="text/javascript">
		
ani();
			
		
		
			function ani() {
				console.log(1);
				var $ani = $(".ani");

				for(var i = 0; i < $ani.length; i++) {
					var $i = $ani[i];
					var jsonArr = $($i).data('animate');
					console.log(typeof(jsonArr.name));

					//得到的结果是字符串
					$($i).css({
						"animation-name": jsonArr.name,
						"-webkit-animation-name": jsonArr.name,
						"animation-duration": jsonArr.duration,
						"animation-timing-function": jsonArr.timing,
						"animation-delay": jsonArr.delay
					})
				}

			}
		</script>