iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
1

Animate.css大全介紹

CSS動畫介紹也到了一個段落,最後來補充一下好用的工具吧~今天就是要來介紹Animate.css!
https://ithelp.ithome.com.tw/upload/images/20181028/20111500fQ3jk2gFPb.jpg
Animate.css這個網站提供很多組動畫效果的CSS class,讓我們可以直接套在HTML元素上,直接產生動畫效果,不用慢慢刻,可以先進入網站玩玩他的效果,如果不想用它提供的類別,也可以直接看它提供的原始碼,參考它是怎麼寫的喔~

  • 使用方法

[ 步驟1 ]直接將animate.css安裝進專案中,並引用

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

或直接引用CDNJS上的版本

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

[ 步驟2 ] 套用class="animated"
[ 步驟3 ] 完成1.2步驟後就可以正式使用animate.css,套上你喜歡的效果類別,做動畫囉!

  • 套用成果
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<h1 class="animated  fadeInUp infinite">Happy Halloween!</h1>
</body>


補充:也可以加入如inifite等class讓他無限循環播放,更多說明可以看animate.css提供的Github連結

~不專業學習筆記,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1] http://blog.infographics.tw/2016/11/animate-css/
[2] https://daneden.github.io/animate.css/
[3] https://github.com/daneden/animate.css/


上一篇
CSS動畫-範例(二):萬聖節快樂!:目 (3)
下一篇
SVG-概述
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言