shaosiming

Animate.css 一个跨浏览器有趣的CSS动画特效组件

Animate.css 是一个有趣的CSS动画特效组件,你可以在你的博客中使用它所提供的特效...

关键词: CSS 特效 Animate 动画
时间:2019-09-11
查看:
评论:0 条 / 我也去评论
Animate.css 是一个有趣的CSS动画特效组件,你可以在你的博客中使用它所提供的特效,包括我之前做的《岁月安然》模板红中的特效就来自Animate.css。

并且Animate.css提供数十个CSS3动画特效,我使用的仅仅是冰山一角,而且也没有详细的去调整参数。

那么今天就让我来打大家认识一下神奇的Animate.css吧!使用教程,和本站提供的免费的静态文件公共CDN库链接~相信你也会打造出属于自己的网页动画特效。

引入文件:文件采用少司命博客提供的statics静态文件CDN加速访问源

< link  rel = “ stylesheet ”  href = “ https://statics.shaosiming.net/css/animate.css ” > 

动画名称:


简单的举个例子:

< h1  class = “ animated infinite bounce delay-2s ” >少司命个人博客</ h1 >

可以更改动画的持续时间,添加延迟或更改播放的次数:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

也可以使用Javascript,然后就可以用animate.css做一大堆其他的东西。一个简单的例子:

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

你可以检测到动画什么时候结束,比如:

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

element.addEventListener('animationend', function() { doSomething() })

你可以使用此简单函数添加和删除动画:

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)
}

延迟和时间:

当然了,你也可以设置延迟和时间。先说延迟,可以直接在class属性上添加延迟,如下所示:

< div  class = “ animated bounce delay-2s ” >少司命个人博客</ div >

其中,delay-2s 就是延迟两秒的时间~ 2s可以自由更改,而delay是控制延迟的属性。

然后还有快慢的设置,比如说下面这种:

<div class="animated bounce faster">少司命个人博客</div>

其中faster代表的是很快的意识,比如slow就是慢的意识,slower是很慢,fast是快,演示中的faster是很快的意识。

好了,总之呢,大家可以慢慢研究,或者参考我做的模板调用的参数例子,我相信大家一定也可以学会的~
顶一下  
(2)
  100%
踩一下  
(0)
  0%
  • 本文标题:Animate.css 一个跨浏览器有趣的CSS动画特效组件
  • 本文链接:https://www.shaosiming.net/html/news/30.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!