css_animate動畫

時間 2019-11-11

標籤 css animate 動畫欄目 CSS 简体版

原文原文鏈接

一、首先引入animate css文件css

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

二、給指定的元素加上指定的動畫樣式名jquery

<div class="animated bounceOutLeft"></div>

這裏包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實現的元素都得添加這個。第二個是指定的動畫樣式名。
三、若是說想給某個元素動態添加動畫樣式，能夠經過jquery來實現：web

$('#yourElement').addClass('animated bounceOutLeft');

animate.css 的默認設置也許有些時候並非咱們想要的，因此你能夠從新設置，好比：動畫

四、當動畫效果執行完成後還能夠經過如下代碼添加事件spa

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

你也能夠經過 JavaScript 或 jQuery 給元素添加這些 class，好比：code

$(function(){
    $('#jq22').addClass('animated bounce');
});

有些動畫效果最後會讓元素不可見，好比淡出、向左滑動等等，可能你又須要將 class 刪除，好比：blog

$(function(){
    $('#jq22').addClass('animated bounce');
    setTimeout(function(){
        $('#jq22').removeClass('bounce');
    }, 1000);
});

animate.css 的默認設置也許有些時候並非咱們想要的，因此你能夠從新設置，好比：事件

#jq22{
    animate-duration: 2s;    //動畫持續時間
    animate-delay: 1s;    //動畫延遲時間
    animate-iteration-count: 2;    //動畫執行次數
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。