Animate.css簡單使用
阿新 • • 發佈：2018-12-21
引入animate.css檔案
1.網路引用
2.下載css
使用方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/animate.css"> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } .modal_content { width: 500px; height: 500px; margin-left: 650px; background-color: rgba(44, 55, 84, 0.8); margin-top: 150px; border-radius: 25px; /*設定動畫屬性*/ /*動畫持續時間*/ -webkit-animation-duration: 3s; /*動畫延遲時間*/ -webkit-animation-delay: 1s; /*動畫執行次數*/ animation-iteration-count: 1; } @media screen and (max-width:1000px) { .modal_content { width: 300px; height: 500px; margin-left: -150px; } } </style> <script type="text/javascript"> $(function () { //給div增加型別新增動畫 var modal_animate= $('.modal_content'); // infinite 無限重複動畫 animated 規定是一個動畫 tada動畫名稱 modal_animate.addClass('animated tada'); //動畫完後執行的函式 modal_animate.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { console.log('hello world'); //動畫完畢後才打印 //移除動畫 modal_animate.removeClass('animated tada'); //新增動畫 modal_animate.addClass('animated rotateIn'); }); }); </script> </head> <body> <div class="modal_content"> <h1 align="center">文字部分</h1> </div> </body> </html>