{"id":2484,"date":"2020-12-15T16:45:48","date_gmt":"2020-12-15T08:45:48","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=2484"},"modified":"2021-10-23T21:14:03","modified_gmt":"2021-10-23T13:14:03","slug":"css-animate-css","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2020\/12\/15\/css-animate-css\/","title":{"rendered":"CSS Animate.css\u5957\u4ef6"},"content":{"rendered":"\n

\u5b89\u88dd<\/h2>\n\n\n\n

https:\/\/daneden.github.io\/animate.css\/<\/a><\/p>\n\n\n\n

npm \u5b89\u88dd\n$ npm install animate.css --save\n\n\u8f09\u5165 CDN\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css<\/pre>\n\n\n\n
\u4f7f\u7528<\/h2>\n\n\n\n
Html\u8a2d\u5b9a<\/h3>\n\n\n\n
class=”\u52d5\u756b \u52d5\u756b\u985e\u5225 \u64ad\u653e\u65b9\u5f0f” \u4f8b : class=”animated bounce infinite”

\u985e\u5225\u8a2d\u5b9a<\/strong>
animated \u555f\u7528\u52d5\u756b
infinite \u7121\u9650\u5faa\u74b0

\u6548\u679c\u985e\u5225<\/strong>
bounce: \u5f48\u8df3<\/p>\n\n\n\n
<!--html\u7bc4\u4f8b-\u4f7f\u7528-->\n\n<head>\n  <link  rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\" \/>\n<\/head>\n\n<h1 class=\"animate__animated animate__bounce\">An animated element<\/h1><\/pre>\n\n\n\n
CSS \u8a2d\u5b9a @keyframes<\/code><\/h3>\n\n\n\n
\/*css\u7bc4\u4f8b-\u4f7f\u7528 @keyframes \u8a2d\u5b9a*\/\n\n.my-element {\n  display: inline-block;\n  margin: 0 0.5rem;\n  \/\/\u76f8\u95dc\u8a2d\u5b9a\n  animation: bounce; \/\/\u52d5\u756b\u6548\u679c\u540d\u7a31\n  animation-duration: 2s; \/\/\u52d5\u756b\u6301\u7e8c\u6642\u9593\n}<\/pre>\n\n\n\n
\/*css\u7bc4\u4f8b-\u81ea\u5b9a\u7fa9\u8b8a\u6578 CSS Variables*\/\n\n.animate__animated.animate__bounce {\n  --animate-duration: 2s;\n}\n\n:root {\n  --animate-duration: 800ms;\n  --animate-delay: 0.9s;\n}<\/pre>\n\n\n\n
JavaScript \u8a2d\u5b9a<\/h3>\n\n\n\n
\/\/ class\u52a0\u5165\u52d5\u756b\u6548\u679c\nconst element = document.querySelector('.my-element');\nelement.classList.add('animate__animated', 'animate__bounceOutLeft');\n\nelement.addEventListener('animationend', () => {\n  \/\/ \u6aa2\u6e2c\u52d5\u756b\u64ad\u653e\u6642\u9593\n});<\/pre>\n\n\n\n
\/\/ \u52d5\u756bX2\u500d\u6642\u9593\u64ad\u653e 2s\ndocument.documentElement.style.setProperty('--animate-duration', '2s');\n\n\/\/ \u52d5\u756b\u4ee51\/2\u6642\u9593\u64ad\u653e 0.5s\nconst element = document.querySelector('.my-element');\nelement.style.setProperty('--animate-duration', '0.5s');\nor\n\/\/ \u52d5\u756b\u4ee51\/2\u6642\u9593\u64ad\u653e 0.5s(\u7c21\u5316)\ndocument.documentElement.style.setProperty('--animate-duration', '.5s');<\/pre>\n\n\n\n
\/\/ \u4f7f\u6dfb\u52a0\u52d5\u756b\u985e\u4e26\u81ea\u52d5\u5c07\u5176\u522a\u9664\nconst animateCSS = (element, animation, prefix = 'animate__') =>\n  \/\/ We create a Promise and return it \u6211\u5011\u5275\u5efa\u4e00\u500bPromise\u4e26\u8fd4\u56de\n  return new Promise((resolve, reject) => {\n    const animationName = `${prefix}${animation}`;\n    const node = document.querySelector(element);\n\n    node.classList.add(`${prefix}animated`, animationName);\n\n    \/\/ When the animation ends, we clean the classes and resolve the Promise\u7576\u52d5\u756b\u7d50\u675f\u6642\uff0c\u6211\u5011\u6e05\u7406\u985e\u4e26\u89e3\u6c7aPromise\n    function handleAnimationEnd() {\n      node.classList.remove(`${prefix}animated`, animationName);\n      resolve('Animation ended');\n    }\n\n    node.addEventListener('animationend', handleAnimationEnd, {once: true});\n  });\n<\/pre>\n\n\n\n
\u7bc4\u4f8b<\/h3>\n\n\n\n
\u5ef6\u9072<\/h4>\n\n\n\n
<!--html\u7bc4\u4f8b-\u5ef6\u9072\u8a2d\u5b9a Delay classes->\n\n<div class=\"animate__animated animate__bounce animate__delay-2s\">Example<\/div>\n\n<!--html\u7bc4\u4f8b-\u5ef6\u9072\u8a2d\u5b9a Delay classes \u6a19\u7c64\u8a2d\u5b9a-->\n\nanimate__delay-2s\t2s\nanimate__delay-3s\t3s\nanimate__delay-4s\t4s\nanimate__delay-5s\t5s<\/pre>\n\n\n\n
\/*css\u7bc4\u4f8b-\u5ef6\u9072\u8a2d\u5b9a Delay classes *\/\n\n\/*\u52d5\u756bX2\u500d\u6642\u9593\u64ad\u653e 2s*\/\n:root {\n  --animate-delay: 2s;\n}\n\/*\u52d5\u756b1\/2\u500d\u6642\u9593\u64ad\u653e 0.5s*\/\n:root {\n  --animate-delay: 0.5s;\n}<\/pre>\n\n\n\n
\u5feb\u6162<\/h4>\n\n\n\n
<!--html\u7bc4\u4f8b-Slow, slower, fast, and Faster classes-->\n\n<div class=\"animate__animated animate__bounce animate__faster\">Example<\/div>\n\n<!--html\u7bc4\u4f8b-Slow, slower, fast, and Faster classes \u6a19\u7c64\u8a2d\u5b9a-->\n\nanimate__slow       2s\nanimate__slower   3s\nanimate__fast         800ms\nanimate__faster     500ms<\/pre>\n\n\n\n
\/*css\u7bc4\u4f8b-\u5ef6\u9072\u8a2d\u5b9a Slow, slower, fast, and Faster classes*\/\n\n:root {\n  --animate-duration: 2s;\n}\n\n.my-element {\n  --animate-duration: 0.5s; \n}<\/pre>\n\n\n\n
\u91cd\u8907\u64ad\u653e<\/h4>\n\n\n\n
<!--html\u7bc4\u4f8b-\u91cd\u8907\u64ad\u653eRepeating classess-->\n\n<div class=\"animate__animated animate__bounce animate__repeat-2\">Example<\/div>\n\n<!--html\u7bc4\u4f8b-\u91cd\u8907\u64ad\u653eRepeating classess\u6a19\u7c64\u8a2d\u5b9a-->\n\nanimate__repeat-1\t1\nanimate__repeat-2\t2\nanimate__repeat-3\t3\nanimate__infinite\tinfinite<\/pre>\n\n\n\n
\/*css\u7bc4\u4f8b-\u91cd\u8907\u64ad\u653eRepeating classess*\/\n\n.my-element {\n  --animate-repeat: 2; \/*\u64ad\u653e\u6b21\u6578*\/\n}<\/pre>\n\n\n\n
JavaScript \u7bc4\u4f8b<\/h4>\n\n\n\n
<!--html\u7bc4\u4f8b-\u9ede\u9078\u770b\u6548\u679c-->\n\n<div class=\"btnGroup\">\n  <button class=\"btn jq-animation\">\u9ede\u64ca\u6211\u770b\u52d5\u756b<\/button>\n  <p class=\"text text3\">\u900f\u904e JS \u5957\u7528\u6548\u679c<\/p>\n<\/div><\/pre>\n\n\n\n
\/\/javasciipt\u7bc4\u4f8b-\u9ede\u9078\u770b\u6548\u679c\n$(function () {\n  $(\".jq-animation\").click(function () {\n    $(\".text3\").addClass(\"animate__animated animate__backInLeft\");\n  });\n  $(\".text3\").on(\"animationend\", function () {\n    \/\/ \u76e3\u807d\u7576\u52d5\u756b\u7d50\u675f\u5f8c\u79fb\u9664 class\n    $(this).removeClass(\"animate__animated animate__backInLeft\");\n  });\n});<\/pre>\n\n\n\n
\u6548\u679c\u985e\u5225<\/h2>\n\n\n\n
Attention seekers

bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat


Back entrances

backInDown
backInLeft
backInRight
backInUp


Back exits

backOutDown
backOutLeft
backOutRight
backOutUp


Bouncing entrances

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp


Bouncing exits

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp


Fading entrances

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight


Fading exits

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft


Flippers

flip
flipInX
flipInY
flipOutX
flipOutY


Lightspeed

lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft


Rotating entrances

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight


Rotating exits

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight


Specials

hinge
jackInTheBox
rollIn
rollOut


Zooming entrances

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp


Zooming exits

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp


Sliding entrances

slideInDown
slideInLeft
slideInRight
slideInUp


Sliding exits

slideOutDown
slideOutLeft
slideOutRight
slideOutUp<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5b89\u88dd https:\/\/daneden.github.io\/animate.css\/ \u4f7f\u7528 Html\u8a2d\u5b9a cla...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-2484","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=2484"}],"version-history":[{"count":57,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2484\/revisions"}],"predecessor-version":[{"id":2804,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2484\/revisions\/2804"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=2484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=2484"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=2484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}