雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

Animate.css動畫庫使用詳解 V3.7

假裝紳士??10個月前555去下載A+A-

?? ? 軟件著作權歸作者所有;本站所有軟件均來源于網絡,僅供學習使用,請支持正版!

在開發雞西企業的網站時需要用到動畫效果(查看演示),animation動畫屬性是Css3的核心屬性之一,它把之前必須Flash或者Js才能做出來的效果通過Css3做出來。animation動畫屬性學好了可以延伸很多很特別的效果,讓你的網站從此脫穎而出,下面由雞西網站設計總結出所有Animate.css的動畫例子分享給大家,希望給正在CSS3學習路上的前端工作者給予幫助:

1、下載Animate.css文件

前往本站分享的下載通道獲取Animate.css

2、調用Animate.css文件

首先將下載到的animate.min.css文件放到文檔的head中,然后為頁面中的元素添加Animate.css的類名。
調用animate.min.css文件

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

3、實現animation動畫

如果要給元素添加動畫效果,先要給元素添加animated類。若需要循環播放動畫效果,再添加infinite類。最后,需要給元素添加以下動畫效果中的一個。
Animate.css為我們提供了14個動畫類型,共計77個動畫效果,請根據實際需求調用相應的類名,以下類名可進行點擊,觀察頂部LOGO的動畫變化

[01]Attention Seekers

bounce flash pulse rubberBand shake swing tada wobble jello heartBeat

[02]Bouncing Entrances

bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp

[03]Bouncing Exits

bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

[04]Fading Entrances

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig

[05]Fading Exits

fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

[06]Flippers

flip flipInX flipInY flipOutX flipOutY

[07]Lightspeed

lightSpeedIn lightSpeedOut

[08]Rotating Entrances

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

[09]Rotating Exits

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

[10]Sliding Entrances

slideInUp slideInDown slideInLeft slideInRight

[11]Sliding Exits

slideOutUp slideOutDown slideOutLeft slideOutRight

[12]Zoom Entrances

zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp

[13]Zoom Exits

zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

[14]Specials

hinge jackInTheBox rollIn rollOut

4、設置元素動畫的延遲和速度

延遲類

可以直接對元素的class屬性添加延遲,如下所示:

<div class="animated bounce delay-2s">雞西網站開發</div>
類名 延遲時間
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s

默認延遲從1秒到5秒不等。如果您需要自定義延遲,直接將其添加到您自己的CSS代碼中。

速度類

可以通過添加這些類來控制動畫的速度,如下所示:
<div class=”animated bounce faster”>雞西網站開發</div>

類名 速度時間
slow 2s
slower 3s
fast 800ms
faster 500ms

*animated類的默認速度為1s。如果您需要自定義持續時間,請將其直接添加到您自己的CSS代碼中。

一個完整的使用案例

<h1 class="animated infinite bounce delay-2s">七網科技</h1>

可以任意更改動畫的持續時間、延遲時間、播放次數

.logo{
    animation-duration: 3s;//動畫持續時間
    animation-delay: 2s;//動畫延遲時間
    animation-iteration-count: infinite;//動畫執行次數
}

與ES6結合使用

當你將Animate.css動畫和Javascript結合起來的時候,你可以實現更加完美的動畫效果。

[01]一個簡單的例子:

const element = document.querySelector('.my-element');
element.classList.add('animated', 'bounceOutLeft');

[02]當動畫效果執行完成后還可以通過以下代碼添加事件:

const element = document.querySelector('.my-element');
element.classList.add('animated', 'bounceOutLeft');
element.addEventListener('animationend', function() { doSomething() });

[03]可以使用這個簡單的函數來添加和刪除動畫:

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

使用以上函數

animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})

const聲明是ES6的方法,不支持比較老的瀏覽器。可以根據實際使用情況自有切換var聲明。

與Javascript或Jquery結合使用

[01]如果想給某個元素動態添加動畫樣式,可以通過jquery來實現:

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

[02]當動畫效果執行完成后還可以通過以下代碼添加事件:

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

[03]你也可以通過JavaScript或jQuery給元素添加這些class,比如:

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

[04]有些動畫效果最后會讓元素不可見,比如淡出、向左滑動等等,可能你又需要將class刪除,比如:

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

資源下載

恭喜,此資源為免費資源,請先

文件版本:V3.7

文件大小:60KB

文件語言:CSS代碼

更新日期:2019-03-31

系統要求:無

技術交流:QQ群 7717114

全部評論: 0
登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖