CSS--使用Animate.css制作动画效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一使用Animate.css动画

// 通过@import引入外部CSS资源;

// 引入线上图片及JS文件;

// 通过更改CSS类名生成不同类型的CSS3动画;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
/* Animate.css GitHub地址:https://github.com/daneden/animate.css */
/* Animate.css 演示地址:https://daneden.github.io/animate.css/ */ @import url("http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css");
body {
background: #cfcfcf;
}
img {
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
width:200px;
height:200px;
} </style>
<body>
<img src="http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png" alt="">
</body>
<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script>
function rock (x) { // 定义事件函数;
$('img').not('.center')
.addClass(x + ' animated') // 添加CSS类名;
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
,function(){
$(this).removeClass();
});
}; $(document).ready(function(){
rock("rubberBand infinite"); // 添加CSS类名生成相应的动态效果;
setTimeout(function(){window.lcation.href = "http://www.kiklink.com"},6000);
// 设置时间跳转;
});
</script>
</html>

二自定义Animate.css动画

// 可以使用animate.css代码作为基础,编写自定义的动画效果;

@keyframes bounce { /*通过@keyframes规则,创建bounce动画;*/
0%,20%,50%,80%,100% {
transform:translateY(0);
}
40% {
transform:translateY(-30px);
}
60% {
transform:translateY(-15px);
}
}
.bounce {
animation-name:bounce; /*调用bounce动画;*/
}
.animated {
animation-duration:3s; /*一个动画周期的时长;*/
animation-fill-mode:both; /*指定动画执行之前之后的样式;*/
}
.animated.infinite {
animation-iteration-count:infinite; /*定义动画播放的次数;(n次/infinite无限次);*/
}

三使用JavaScript控制动画

$('img').click(function(){ // 给Img元素绑定点击事件;
var $this = $(this); // 鼠标点击之后添加相应的动画类名;
$this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){
// 当-webkit-animation动画结束之后会有一个webkitAnimationEnd事件;
// 当one()方法监听到webkitAnimationEnd事件之后才执行function函数;one()方法只能执行一次;
$this.removeClass(); // 清除相应的动画类名;
})
});