利用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>