<!-- Add Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<!-- Add jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Animate.css adds an animation class name to the class and uses it. To repeat playback, add "infinite" to the class. -->
<a href="#" class="animated infinite {animation-class-name}">Example</a>
Attention Seekers | |||
bounce | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | ||
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 | |||
Fading Exits | |||
fadeOut | fadeOutDown | fadeOutDownBig | fadeOutLeft |
fadeOutLeftBig | fadeOutRight | fadeOutRightBig | fadeOutUp |
fadeOutUpBig | |||
Flippers | |||
flipInX | flipInY | flipOutX | flipOutY |
Lightspeed | |||
lightSpeedIn | lightSpeedOut | ||
Rotating Entrances | |||
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | |||
Rotating Exits | |||
rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft |
rotateOutUpRight | |||
Sliding Entrances | |||
slideInUp | slideInDown | slideInLeft | slideInRight |
Sliding Exits | |||
slideOutUp | slideOutDown | slideOutLeft | slideOutRight |
Zoom Entrances | |||
zoomIn | zoomInDown | zoomInLeft | zoomInRight |
zoomInUp | |||
Zoom Exits | |||
zoomOut | zoomOutDown | zoomOutLeft | |
zoomOutRight | zoomOutUp | ||
Specials | |||
hinge | jackInTheBox | rollIn | rollOut |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<!-- Add jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Animate.css</title>
<style>
.button{
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 170px;
margin: 5px;
padding: 15px 0;
transition: all .5s;
text-decoration: none;
color: #fff;
border: none;
border-radius: 5px;
background-color: hsl(174, 100%, 29%);
}
.button:hover{
background-color: hsl(174, 100%, 35%);
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">Animate.css</h1>
<p class="dlw-description">Animate.css is a style-sheet collection of animation effects.</p>
</header>
<!-- In order to check the effect of Animate.css, click event is set with jQuery. -->
<script>
$(function () {
$('.button').on('click', function () {
// Click to get the class name of the data attribute and add it to the button.
var animation = 'animated' + ' ' + $(this).data('animate');
$(this).addClass(animation);
// Click 2 seconds back to restore.
$(this).delay(2000).queue(function(){
$(this).removeAttr('class').addClass('button');
});
return false;
});
});
</script>
<section>
<h2 class="dlw-subtitle">[1] Attention Seekers</h2>
<p>Click on the button to play.</p>
<!-- bounce: Add Class "animated bounce" -->
<a href="#" class="button" data-animate="bounce">bounce</a>
<!-- flash: Add Class "animated flash" -->
<a href="#" class="button" data-animate="flash">flash</a>
<!-- pulse: Add Class "animated pulse" -->
<a href="#" class="button" data-animate="pulse">pulse</a>
<!-- rubberBand: Add Class "animated rubberBand" -->
<a href="#" class="button" data-animate="rubberBand">rubberBand</a>
<!-- shake: Add Class "animated shake" -->
<a href="#" class="button" data-animate="shake">shake</a>
<!-- headShake: Add Class "animated headShake" -->
<a href="#" class="button" data-animate="headShake">headShake</a>
<!-- swing: Add Class "animated swing" -->
<a href="#" class="button" data-animate="swing">swing</a>
<!-- tada: Add Class "animated tada" -->
<a href="#" class="button" data-animate="tada">tada</a>
<!-- wobble: Add Class "animated wobble" -->
<a href="#" class="button" data-animate="wobble">wobble</a>
<!-- jello: Add Class "animated jello" -->
<a href="#" class="button" data-animate="jello">jello</a>
</section>
<section>
<h2 class="dlw-subtitle">[2] Bouncing Entrances</h2>
<p>Click on the button to play.</p>
<!-- bounceIn: Add Class "animated bounceIn" -->
<a href="#" class="button" data-animate="bounceIn">bounceIn</a>
<!-- bounceInDown: Add Class "animated bounceInDown" -->
<a href="#" class="button" data-animate="bounceInDown">bounceInDown</a>
<!-- bounceInLeft: Add Class "animated bounceInLeft" -->
<a href="#" class="button" data-animate="bounceInLeft">bounceInLeft</a>
<!-- bounceInRight: Add Class "animated bounceInRight" -->
<a href="#" class="button" data-animate="bounceInRight">bounceInRight</a>
<!-- bounceInUp: Add Class "animated bounceInUp" -->
<a href="#" class="button" data-animate="bounceInUp">bounceInUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[3] Bouncing Exits</h2>
<p>Click on the button to play.</p>
<!-- bounceOut: Add Class "animated bounceOut" -->
<a href="#" class="button" data-animate="bounceOut">bounceOut</a>
<!-- bounceOutDown: Add Class "animated bounceOutDown" -->
<a href="#" class="button" data-animate="bounceOutDown">bounceOutDown</a>
<!-- bounceOutLeft: Add Class "animated bounceOutLeft" -->
<a href="#" class="button" data-animate="bounceOutLeft">bounceOutLeft</a>
<!-- bounceOutRight: Add Class "animated bounceOutRight" -->
<a href="#" class="button" data-animate="bounceOutRight">bounceOutRight</a>
<!-- bounceOutUp: Add Class "animated bounceOutUp" -->
<a href="#" class="button" data-animate="bounceOutUp">bounceOutUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[4] Fading Entrances</h2>
<p>Click on the button to play.</p>
<!-- fadeIn: Add Class "animated fadeIn" -->
<a href="#" class="button" data-animate="fadeIn">fadeIn</a>
<!-- fadeInDown: Add Class "animated fadeInDown" -->
<a href="#" class="button" data-animate="fadeInDown">fadeInDown</a>
<!-- fadeInDownBig: Add Class "animated fadeInDownBig" -->
<a href="#" class="button" data-animate="fadeInDownBig">fadeInDownBig</a>
<!-- fadeInLeft: Add Class "animated fadeInLeft" -->
<a href="#" class="button" data-animate="fadeInLeft">fadeInLeft</a>
<!-- fadeInLeftBig: Add Class "animated fadeInLeftBig" -->
<a href="#" class="button" data-animate="fadeInLeftBig">fadeInLeftBig</a>
<!-- fadeInRight: Add Class "animated fadeInRight" -->
<a href="#" class="button" data-animate="fadeInRight">fadeInRight</a>
<!-- fadeInRightBig: Add Class "animated fadeInRightBig" -->
<a href="#" class="button" data-animate="fadeInRightBig">fadeInRightBig</a>
<!-- fadeInUp: Add Class "animated fadeInUp" -->
<a href="#" class="button" data-animate="fadeInUp">fadeInUp</a>
<!-- fadeInUpBig: Add Class "animated fadeInUpBig" -->
<a href="#" class="button" data-animate="fadeInUpBig">fadeInUpBig</a>
</section>
<section>
<h2 class="dlw-subtitle">[5] Fading Exits</h2>
<p>Click on the button to play.</p>
<!-- fadeOut: Add Class "animated fadeOut" -->
<a href="#" class="button" data-animate="fadeOut">fadeOut</a>
<!-- fadeOutDown: Add Class "animated fadeOutDown" -->
<a href="#" class="button" data-animate="fadeOutDown">fadeOutDown</a>
<!-- fadeOutDownBig: Add Class "animated fadeOutDownBig" -->
<a href="#" class="button" data-animate="fadeOutDownBig">fadeOutDownBig</a>
<!-- fadeOutLeft: Add Class "animated fadeOutLeft" -->
<a href="#" class="button" data-animate="fadeOutLeft">fadeOutLeft</a>
<!-- fadeOutLeftBig: Add Class "animated fadeOutLeftBig" -->
<a href="#" class="button" data-animate="fadeOutLeftBig">fadeOutLeftBig</a>
<!-- fadeOutRight: Add Class "animated fadeOutRight" -->
<a href="#" class="button" data-animate="fadeOutRight">fadeOutRight</a>
<!-- fadeOutRightBig: Add Class "animated fadeOutRightBig" -->
<a href="#" class="button" data-animate="fadeOutRightBig">fadeOutRightBig</a>
<!-- fadeOutUp: Add Class "animated fadeOutUp" -->
<a href="#" class="button" data-animate="fadeOutUp">fadeOutUp</a>
<!-- fadeOutUpBig: Add Class "animated fadeOutUpBig" -->
<a href="#" class="button" data-animate="fadeOutUpBig">fadeOutUpBig</a>
</section>
<section>
<h2 class="dlw-subtitle">[6] Flippers</h2>
<p>Click on the button to play.</p>
<!-- flipInX: Add Class "animated flipInX" -->
<a href="#" class="button" data-animate="flipInX">flipInX</a>
<!-- flipInY: Add Class "animated flipInY" -->
<a href="#" class="button" data-animate="flipInY">flipInY</a>
<!-- flipOutX: Add Class "animated flipOutX" -->
<a href="#" class="button" data-animate="flipOutX">flipOutX</a>
<!-- flipOutY: Add Class "animated flipOutY" -->
<a href="#" class="button" data-animate="flipOutY">flipOutY</a>
</section>
<section>
<h2 class="dlw-subtitle">[7] Lightspeed</h2>
<p>Click on the button to play.</p>
<!-- lightSpeedIn: Add Class "animated lightSpeedIn" -->
<a href="#" class="button" data-animate="lightSpeedIn">lightSpeedIn</a>
<!-- lightSpeedOut: Add Class "animated lightSpeedOut" -->
<a href="#" class="button" data-animate="lightSpeedOut">lightSpeedOut</a>
</section>
<section>
<h2 class="dlw-subtitle">[8] Rotating Entrances</h2>
<p>Click on the button to play.</p>
<!-- rotateIn: Add Class "animated rotateIn" -->
<a href="#" class="button" data-animate="rotateIn">rotateIn</a>
<!-- rotateInDownLeft: Add Class "animated rotateInDownLeft" -->
<a href="#" class="button" data-animate="rotateInDownLeft">rotateInDownLeft</a>
<!-- rotateInDownRight: Add Class "animated rotateInDownRight" -->
<a href="#" class="button" data-animate="rotateInDownRight">rotateInDownRight</a>
<!-- rotateInUpLeft: Add Class "animated rotateInUpLeft" -->
<a href="#" class="button" data-animate="rotateInUpLeft">rotateInUpLeft</a>
<!-- rotateInUpRight: Add Class "animated rotateInUpRight" -->
<a href="#" class="button" data-animate="rotateInUpRight">rotateInUpRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[9] Rotating Exits</h2>
<p>Click on the button to play.</p>
<!-- rotateOut: Add Class "animated rotateOut" -->
<a href="#" class="button" data-animate="rotateOut">rotateOut</a>
<!-- rotateOutDownLeft: Add Class "animated rotateOutDownLeft" -->
<a href="#" class="button" data-animate="rotateOutDownLeft">rotateOutDownLeft</a>
<!-- rotateOutDownRight: Add Class "animated rotateOutDownRight" -->
<a href="#" class="button" data-animate="rotateOutDownRight">rotateOutDownRight</a>
<!-- rotateOutUpLeft: Add Class "animated rotateOutUpLeft" -->
<a href="#" class="button" data-animate="rotateOutUpLeft">rotateOutUpLeft</a>
<!-- rotateOutUpRight: Add Class "animated rotateOutUpRight" -->
<a href="#" class="button" data-animate="rotateOutUpRight">rotateOutUpRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[10] Sliding Entrances</h2>
<p>Click on the button to play.</p>
<!-- slideInUp: Add Class "animated slideInUp" -->
<a href="#" class="button" data-animate="slideInUp">slideInUp</a>
<!-- slideInDown: Add Class "animated slideInDown" -->
<a href="#" class="button" data-animate="slideInDown">slideInDown</a>
<!-- slideInLeft: Add Class "animated slideInLeft" -->
<a href="#" class="button" data-animate="slideInLeft">slideInLeft</a>
<!-- slideInRight: Add Class "animated slideInRight" -->
<a href="#" class="button" data-animate="slideInRight">slideInRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[11] Sliding Exits</h2>
<p>Click on the button to play.</p>
<!-- slideOutUp: Add Class "animated slideOutUp" -->
<a href="#" class="button" data-animate="slideOutUp">slideOutUp</a>
<!-- slideOutDown: Add Class "animated slideOutDown" -->
<a href="#" class="button" data-animate="slideOutDown">slideOutDown</a>
<!-- slideOutLeft: Add Class "animated slideOutLeft" -->
<a href="#" class="button" data-animate="slideOutLeft">slideOutLeft</a>
<!-- slideOutRight: Add Class "animated slideOutRight" -->
<a href="#" class="button" data-animate="slideOutRight">slideOutRight</a>
</section>
<section>
<h2 class="dlw-subtitle">[12] Zoom Entrances</h2>
<p>Click on the button to play.</p>
<!-- zoomIn: Add Class "animated zoomIn" -->
<a href="#" class="button" data-animate="zoomIn">zoomIn</a>
<!-- zoomInDown: Add Class "animated zoomInDown" -->
<a href="#" class="button" data-animate="zoomInDown">zoomInDown</a>
<!-- zoomInLeft: Add Class "animated zoomInLeft" -->
<a href="#" class="button" data-animate="zoomInLeft">zoomInLeft</a>
<!-- zoomInRight: Add Class "animated zoomInRight" -->
<a href="#" class="button" data-animate="zoomInRight">zoomInRight</a>
<!-- zoomInUp: Add Class "animated zoomInUp" -->
<a href="#" class="button" data-animate="zoomInUp">zoomInUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[13] Zoom Exits</h2>
<p>Click on the button to play.</p>
<!-- zoomOut: Add Class "animated zoomOut" -->
<a href="#" class="button" data-animate="zoomOut">zoomOut</a>
<!-- zoomOutDown: Add Class "animated zoomOutDown" -->
<a href="#" class="button" data-animate="zoomOutDown">zoomOutDown</a>
<!-- zoomOutLeft: Add Class "animated zoomOutLeft" -->
<a href="#" class="button" data-animate="zoomOutLeft">zoomOutLeft</a>
<!-- zoomOutRight: Add Class "animated zoomOutRight" -->
<a href="#" class="button" data-animate="zoomOutRight">zoomOutRight</a>
<!-- zoomOutUp: Add Class "animated zoomOutUp" -->
<a href="#" class="button" data-animate="zoomOutUp">zoomOutUp</a>
</section>
<section>
<h2 class="dlw-subtitle">[14] Specials</h2>
<p>Click on the button to play.</p>
<!-- hinge: Add Class "animated hinge" -->
<a href="#" class="button" data-animate="hinge">hinge</a>
<!-- jackInTheBox: Add Class "animated jackInTheBox" -->
<a href="#" class="button" data-animate="jackInTheBox">jackInTheBox</a>
<!-- rollIn: Add Class "animated rollIn" -->
<a href="#" class="button" data-animate="rollIn">rollIn</a>
<!-- rollOut: Add Class "animated rollOut" -->
<a href="#" class="button" data-animate="rollOut">rollOut</a>
</section>
</body>
</html>
Here, design samples of various effects to text are posted.
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
Using
In this example, Picturefill is added for IE.
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.
Flex is the value of the CSS display property.
It is a standard button design of Bootstrap Framework.
Hover.css is a style-sheet collection of hover effects.
Button.css is collection of CSS3 button animations.
It is a standard Card design of Bootstrap Framework.
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
Introduction of various embedment methods of YouTube.
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.
Instagram.css is a stylesheet set that filters photos like instagram.
Moment.js is a javascript that processes and displays date and time.
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
Multifilter is jQuery Table Filtering Plugin.
Responsive table using "display: flex;".
Not supported for rowspan.
Responsive table using "display: grid;".
Not supported for rowspan.
It is a standard Table design of Bootstrap Framework.
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
It is a standard Carousel of Bootstrap Framework.
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
metisMenu is a jQuery plugin that expands vertical and vertical menus.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
Scrolla is jQuery scroll animation plugin.
Hover.css is a style-sheet collection of hover effects.
Animate.css is a style-sheet collection of animation effects.
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
jQuery.mb.YTPlayer is jQuery Background player plugin.
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
It is a standard Carousel of Bootstrap Framework.
It is a standard Card design of Bootstrap Framework.
It is a standard button design of Bootstrap Framework.
It is a standard Table design of Bootstrap Framework.
HTML5 Cheat Sheet by Make A Website Hub
CSS3 Cheat Sheet by Smashing Magazine
This is the Visual Studio Code default keyboard shortcut list.
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
On this page you can search for codes collectively.
It is a news feed about design.