animate.cssで簡単に面白い動きを実装できる!!
animate.cssを使用することで、簡単に以下のサイトで紹介されている動きを実現できます！
Animate.css
使い方は以下のサイトを参照してください。
bashalog.c-brains.jp
html**
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Animate.cssでCSSアニメーション</title> <link rel="stylesheet" href="css/animate.css" /> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/howto.js"></script> </head> <body> <ul> <li><img src="btn_anc_search.png" alt=""></li> <li><img src="btn_anc_search.png" alt=""></li> <li><img src="btn_anc_search.png" alt=""></li> <li><img src="btn_anc_search.png" alt=""></li> <li><img src="btn_anc_search.png" alt=""></li> <li><img src="btn_anc_search.png" alt=""></li> </ul> </body> </html>
CSS**
*{margin:0; padding:0;} ul{text-align: center; list-style: none; margin:100px auto;} ul li{ margin-bottom: 30px;} ul li.animated.swing{ -webkit-animation-duration: 1.5s; animation-duration: 1.5s } ul li.animated.flipInY{ -webkit-animation-duration: 1.5s; animation-duration: 1.5s }
JS**
// $(function(){
// $("ul li").on({
// "click":function(){
// $(this).addClass("animated swing");
// },
// "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
// $(this).removeClass("animated swing");
// }
// });
// });
// 参考
// https://naoyu.net/css/animate-css/
// http://www.htmq.com/css3/animation.shtml
$(function(){
$("ul li:nth-child(1)").on({
"click":function(){
$(this).addClass("animated swing");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated swing");
}
});
$("ul li:nth-child(2)").on({
"mouseover":function(){
$(this).addClass("animated flash");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated flash");
}
});
$("ul li:nth-child(3)").on({
"click":function(){
$(this).addClass("animated rubberBand");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated rubberBand");
}
});
$("ul li:nth-child(4)").on({
"mouseover":function(){
$(this).addClass("animated bounceInDown");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated bounceInDown");
}
});
$("ul li:nth-child(5)").on({
"click":function(){
$(this).addClass("animated bounceInLeft");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated bounceInLeft");
}
});
$("ul li:nth-child(6)").on({
"click":function(){
$(this).addClass("animated flipInY");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated flipInY");
}
});
});
