Css animation name fadeindown

Transitioning between open close in details element

No, not currently. Yes, but only if you know the height or can animate the font-size .

Originally, this wasn’t the case. From http://html5doctor.com/the-details-and-summary-elements/, «. if you could use CSS transitions to animate the opening and closing, but we can’t just yet.» (There is a comment at HTML5 doctor near the end, but it appears to require JS to force the CSS animation.)

It was possible to use different styles based on whether it’s opened or closed, but transitions didn’t «take» normally. Today, however, the transitions do work if you know the height or can animate the font-size . See http://codepen.io/morewry/pen/gbJvy for examples and more details.

This was the 2013 solution that kind of fakes it:

CSS (May need to add prefixes)

/* http://daneden.me/animate/ */ @keyframes fadeInDown < 0% < opacity: 0; transform: translateY(-1.25em); >100% < opacity: 1; transform: translateY(0); >> .details-animated[open]

CSS Animation - Summary Try using [Dan Eden's fadeInDown][1] to maybe fake it a little. Yay, some animation.
 

CSS (May need to add prefixes)

.details-animated < transition: height 1s ease; >.details-animated:not([open]) < height: 1.25em; >.details-animated[open]

PS: Only tested in Chrome. Hear FF still doesn’t support details in general. IE and Edge prior to version 79 still don’t support details .

(You can use keyframe animations or transitions to do all sorts of other animations for open. I’ve chosen fadeInDown for illustration purposes only. It is a reasonable choice which will give a similar feel if you are unable to add extra markup or will not know the height of the contents. Your options are, however, not limited to this: see the comments on this answer that include two alternatives, including the font-size approach.)

Источник

Набор анимаций animate.css

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.

Примеры:

ANIMATE.CSS

Установка:

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:

Продолжительность:

Пример:

Пример

Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:

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

Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js

Источник

Quickly add CSS Fade in animations

And finally the rest is just the animation itself. It consists of @keyframe that tells what’s changing and how, as well as the keyframe pointer.

@-webkit-keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> @keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> /*—keyframe pointer —*/ .fadeIn

That’s all you need to create these animations! So your html might look like this:

First class is just to style our object, second is the trigger, then animation name followed by an optional delay.

Final CSS you can just copy and paste to yours

The below css has the following animations: fadeIn, fadeInDown, fadeInUp, fadeInLeft and fadeInRight . Just add this CSS to the bottom of yours and you can start using them just like in our example. More run down how this works and creating custom animations is in our original tutorial.

/*=== Basic box styling ===*/ .box < background: #23a3d3; width: 150px; height: 70px; padding: 20px; text-align: center; color: white; border-radius: 7px; float: left; margin: 4px; font-family: 'helvetica'; text-transform: uppercase; >/*=== Trigger ===*/ .animate < -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; >/*=== Optional Delays, change values here ===*/ .one < -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; >.two < -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; animation-delay: 1.7s; >.three < -webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; animation-delay: 2.3s; >.four < -webkit-animation-delay: 3.3s; -moz-animation-delay: 3.3s; animation-delay: 3.3s; >/*=== Animations start here ===*/ /*=== FADE IN ===*/ @-webkit-keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> @keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >> .fadeIn < -webkit-animation-name: fadeIn; animation-name: fadeIn; >/*=== FADE IN DOWN ===*/ @-webkit-keyframes fadeInDown < from < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInDown < from < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInDown < -webkit-animation-name: fadeInDown; animation-name: fadeInDown; >/*==== FADE IN UP ===*/ @-webkit-keyframes fadeInUp < from < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInUp < from < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInUp < -webkit-animation-name: fadeInUp; animation-name: fadeInUp; >/*=== FADE IN LEFT ===*/ @-webkit-keyframes fadeInLeft < from < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInLeft < from < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInLeft < -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; >/*==== FADE IN RIGHT ===*/ @-webkit-keyframes fadeInRight < from < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInRight < from < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >to < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInRight

The only limitation of this is that it only animates once. So if you have a lot of these on a page and some below the fold, even though you have added a delay they might get executed before user actually sees them. The solution is to have these animations come in as user scrolls all you need is include 1 small js file and you are set (you can still use the above tags you just will use a different trigger word other than animate, see our tutorial

Let us know how you are using this! Again remember to not overdo it, fadeIn and fadeInUp look the best (you can see it on our about us page as you scroll).

Источник

CSS Animate Effects We Can Learn From Animate.css

In this tutorial we going to look into the open source project which has become very popular lately. Animate.css. This is a project which is currently hosted on Github where you can download the source. We are going to look at some of the best CSS animation effects out of the 53 CSS Animation effects you can get with this project.

Animate.css

The animate.css project can be downloaded from github. Download Animate.css You can view the demo of Animate.css here. Animate.css Demo Below are the following effects you get with animate.css and the CSS it takes to create the effect.

CSS Flash Animation

The flash effect will show and hide the element by using the opacity property.

 @-webkit-keyframes flash < 0%, 50%, 100% 25%, 75% > @-moz-keyframes flash < 0%, 50%, 100% 25%, 75% > @-ms-keyframes flash < 0%, 50%, 100% 25%, 75% > @-o-keyframes flash < 0%, 50%, 100% 25%, 75% > @keyframes flash < 0%, 50%, 100% 25%, 75% > .flash 

CSS Shake Animation

This effect will create a shake effect by moving the element from left to right.

 @-webkit-keyframes shake < 0%, 100% 10%, 30%, 50%, 70%, 90% 20%, 40%, 60%, 80% > @-moz-keyframes shake < 0%, 100% 10%, 30%, 50%, 70%, 90% 20%, 40%, 60%, 80% > @-ms-keyframes shake < 0%, 100% 10%, 30%, 50%, 70%, 90% 20%, 40%, 60%, 80% > @-o-keyframes shake < 0%, 100% 10%, 30%, 50%, 70%, 90% 20%, 40%, 60%, 80% > @keyframes shake < 0%, 100% 10%, 30%, 50%, 70%, 90% 20%, 40%, 60%, 80% > .shake 

CSS Bounce Animation

This effect will make the HTML element bounce.

 @-webkit-keyframes bounce < 0%, 20%, 50%, 80%, 100% 40% 60% > @-moz-keyframes bounce < 0%, 20%, 50%, 80%, 100% 40% 60% > @-ms-keyframes bounce < 0%, 20%, 50%, 80%, 100% 40% 60% > @-o-keyframes bounce < 0%, 20%, 50%, 80%, 100% 40% 60% > @keyframes bounce < 0%, 20%, 50%, 80%, 100% 40% 60% > .bounce 

CSS Swing Animation

Make the element swing from left to right.

 @-webkit-keyframes swing < 20%, 40%, 60%, 80%, 100% < -webkit-transform-origin: top center; >20% < -webkit-transform: rotate(15deg); >40% < -webkit-transform: rotate(-10deg); >60% < -webkit-transform: rotate(5deg); >80% < -webkit-transform: rotate(-5deg); >100% < -webkit-transform: rotate(0deg); >> @-moz-keyframes swing < 20% < -moz-transform: rotate(15deg); >40% < -moz-transform: rotate(-10deg); >60% < -moz-transform: rotate(5deg); >80% < -moz-transform: rotate(-5deg); >100% < -moz-transform: rotate(0deg); >> @-ms-keyframes swing < 20% < -ms-transform: rotate(15deg); >40% < -ms-transform: rotate(-10deg); >60% < -ms-transform: rotate(5deg); >80% < -ms-transform: rotate(-5deg); >100% < -ms-transform: rotate(0deg); >> @-o-keyframes swing < 20% < -o-transform: rotate(15deg); >40% < -o-transform: rotate(-10deg); >60% < -o-transform: rotate(5deg); >80% < -o-transform: rotate(-5deg); >100% < -o-transform: rotate(0deg); >> @keyframes swing < 20% < transform: rotate(15deg); >40% < transform: rotate(-10deg); >60% < transform: rotate(5deg); >80% < transform: rotate(-5deg); >100% < transform: rotate(0deg); >> .swing 

CSS Wobble Animation

Make the HTML element wobble with CSS animation.

 @-webkit-keyframes wobble < 0% < -webkit-transform: translateX(0%); >15% < -webkit-transform: translateX(-25%) rotate(-5deg); >30% < -webkit-transform: translateX(20%) rotate(3deg); >45% < -webkit-transform: translateX(-15%) rotate(-3deg); >60% < -webkit-transform: translateX(10%) rotate(2deg); >75% < -webkit-transform: translateX(-5%) rotate(-1deg); >100% < -webkit-transform: translateX(0%); >> @-moz-keyframes wobble < 0% < -moz-transform: translateX(0%); >15% < -moz-transform: translateX(-25%) rotate(-5deg); >30% < -moz-transform: translateX(20%) rotate(3deg); >45% < -moz-transform: translateX(-15%) rotate(-3deg); >60% < -moz-transform: translateX(10%) rotate(2deg); >75% < -moz-transform: translateX(-5%) rotate(-1deg); >100% < -moz-transform: translateX(0%); >> @-ms-keyframes wobble < 0% < -ms-transform: translateX(0%); >15% < -ms-transform: translateX(-25%) rotate(-5deg); >30% < -ms-transform: translateX(20%) rotate(3deg); >45% < -ms-transform: translateX(-15%) rotate(-3deg); >60% < -ms-transform: translateX(10%) rotate(2deg); >75% < -ms-transform: translateX(-5%) rotate(-1deg); >100% < -ms-transform: translateX(0%); >> @-o-keyframes wobble < 0% < -o-transform: translateX(0%); >15% < -o-transform: translateX(-25%) rotate(-5deg); >30% < -o-transform: translateX(20%) rotate(3deg); >45% < -o-transform: translateX(-15%) rotate(-3deg); >60% < -o-transform: translateX(10%) rotate(2deg); >75% < -o-transform: translateX(-5%) rotate(-1deg); >100% < -o-transform: translateX(0%); >> @keyframes wobble < 0% < transform: translateX(0%); >15% < transform: translateX(-25%) rotate(-5deg); >30% < transform: translateX(20%) rotate(3deg); >45% < transform: translateX(-15%) rotate(-3deg); >60% < transform: translateX(10%) rotate(2deg); >75% < transform: translateX(-5%) rotate(-1deg); >100% < transform: translateX(0%); >> .wobble 

CSS Pulse Animation

Creates a pulse effect on the HTML element.

 @-webkit-keyframes pulse < 0% < -webkit-transform: scale(1); >50% < -webkit-transform: scale(1.1); >100% < -webkit-transform: scale(1); >> @-moz-keyframes pulse < 0% < -moz-transform: scale(1); >50% < -moz-transform: scale(1.1); >100% < -moz-transform: scale(1); >> @-ms-keyframes pulse < 0% < -ms-transform: scale(1); >50% < -ms-transform: scale(1.1); >100% < -ms-transform: scale(1); >> @-o-keyframes pulse < 0% < -o-transform: scale(1); >50% < -o-transform: scale(1.1); >100% < -o-transform: scale(1); >> @keyframes pulse < 0% < transform: scale(1); >50% < transform: scale(1.1); >100% < transform: scale(1); >> .pulse 

CSS Flip Animation

Makes the HTML element flip, will use 3D transforms so will only work in the latest browsers.

 @-webkit-keyframes flip < 0% < -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; >40% < -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; >50% < -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; >80% < -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; >100% < -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; >> @-moz-keyframes flip < 0% < -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; >40% < -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; >50% < -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; >80% < -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; >100% < -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; >> @-ms-keyframes flip < 0% < -ms-transform: perspective(400px) rotateY(0); -ms-animation-timing-function: ease-out; >40% < -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-animation-timing-function: ease-out; >50% < -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-animation-timing-function: ease-in; >80% < -ms-transform: perspective(400px) rotateY(360deg) scale(.95); -ms-animation-timing-function: ease-in; >100% < -ms-transform: perspective(400px) scale(1); -ms-animation-timing-function: ease-in; >> @-o-keyframes flip < 0% < -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; >40% < -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; >50% < -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; >80% < -o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; >100% < -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; >> @keyframes flip < 0% < transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; >40% < transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; >50% < transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; >80% < transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; >100% < transform: perspective(400px) scale(1); animation-timing-function: ease-in; >> .flip 

CSS Fade In Down Animation

Make the HTML element fade down with this CSS animation.

 @-webkit-keyframes fadeInDown < 0% < opacity: 0; -webkit-transform: translateY(-20px); >100% < opacity: 1; -webkit-transform: translateY(0); >> @-moz-keyframes fadeInDown < 0% < opacity: 0; -moz-transform: translateY(-20px); >100% < opacity: 1; -moz-transform: translateY(0); >> @-ms-keyframes fadeInDown < 0% < opacity: 0; -ms-transform: translateY(-20px); >100% < opacity: 1; -ms-transform: translateY(0); >> @-o-keyframes fadeInDown < 0% < opacity: 0; -ms-transform: translateY(-20px); >100% < opacity: 1; -ms-transform: translateY(0); >> @keyframes fadeInDown < 0% < opacity: 0; transform: translateY(-20px); >100% < opacity: 1; transform: translateY(0); >> .fadeInDown 

CSS Fade In Left Animation

Makes the HTML element fade in from the left.

 @-webkit-keyframes fadeInLeft < 0% < opacity: 0; -webkit-transform: translateX(-20px); >100% < opacity: 1; -webkit-transform: translateX(0); >> @-moz-keyframes fadeInLeft < 0% < opacity: 0; -moz-transform: translateX(-20px); >100% < opacity: 1; -moz-transform: translateX(0); >> @-ms-keyframes fadeInLeft < 0% < opacity: 0; -ms-transform: translateX(-20px); >100% < opacity: 1; -ms-transform: translateX(0); >> @-o-keyframes fadeInLeft < 0% < opacity: 0; -o-transform: translateX(-20px); >100% < opacity: 1; -o-transform: translateX(0); >> @keyframes fadeInLeft < 0% < opacity: 0; transform: translateX(-20px); >100% < opacity: 1; transform: translateX(0); >> .fadeInLeft 

CSS Fade In Down Big Animation

This is similar to the fade in down animation, but it will fade the element in from the top of the page.

 @-webkit-keyframes fadeInDownBig < 0% < opacity: 0; -webkit-transform: translateY(-2000px); >100% < opacity: 1; -webkit-transform: translateY(0); >> @-moz-keyframes fadeInDownBig < 0% < opacity: 0; -moz-transform: translateY(-2000px); >100% < opacity: 1; -moz-transform: translateY(0); >> @-ms-keyframes fadeInDownBig < 0% < opacity: 0; -ms-transform: translateY(-2000px); >100% < opacity: 1; -ms-transform: translateY(0); >> @-o-keyframes fadeInDownBig < 0% < opacity: 0; -o-transform: translateY(-2000px); >100% < opacity: 1; -o-transform: translateY(0); >> @keyframes fadeInDownBig < 0% < opacity: 0; transform: translateY(-2000px); >100% < opacity: 1; transform: translateY(0); >> .fadeInDownBig 

CSS Fade In Left Big Animation

Makes the element fade in from the left of the page into the middle of the page.

 @-webkit-keyframes fadeInLeftBig < 0% < opacity: 0; -webkit-transform: translateX(-2000px); >100% < opacity: 1; -webkit-transform: translateX(0); >> @-moz-keyframes fadeInLeftBig < 0% < opacity: 0; -moz-transform: translateX(-2000px); >100% < opacity: 1; -moz-transform: translateX(0); >> @-ms-keyframes fadeInLeftBig < 0% < opacity: 0; -ms-transform: translateX(-2000px); >100% < opacity: 1; -ms-transform: translateX(0); >> @-o-keyframes fadeInLeftBig < 0% < opacity: 0; -o-transform: translateX(-2000px); >100% < opacity: 1; -o-transform: translateX(0); >> @keyframes fadeInLeftBig < 0% < opacity: 0; transform: translateX(-2000px); >100% < opacity: 1; transform: translateX(0); >> .fadeInLeftBig 

CSS Fade Out Animation

Makes the HTML element fade out.

 @-webkit-keyframes fadeOut < 0% 100% > @-moz-keyframes fadeOut < 0% 100% > @-ms-keyframes fadeOut < 0% 100% > @-o-keyframes fadeOut < 0% 100% > @keyframes fadeOut < 0% 100% > .fadeOut 

CSS Fade Out Down Big Animation

Makes the HTML element fade out down the page.

 @-webkit-keyframes fadeOutDownBig < 0% < opacity: 1; -webkit-transform: translateY(0); >100% < opacity: 0; -webkit-transform: translateY(2000px); >> @-moz-keyframes fadeOutDownBig < 0% < opacity: 1; -moz-transform: translateY(0); >100% < opacity: 0; -moz-transform: translateY(2000px); >> @-ms-keyframes fadeOutDownBig < 0% < opacity: 1; -ms-transform: translateY(0); >100% < opacity: 0; -ms-transform: translateY(2000px); >> @-o-keyframes fadeOutDownBig < 0% < opacity: 1; -o-transform: translateY(0); >100% < opacity: 0; -o-transform: translateY(2000px); >> @keyframes fadeOutDownBig < 0% < opacity: 1; transform: translateY(0); >100% < opacity: 0; transform: translateY(2000px); >> .fadeOutDownBig 

CSS Fade Out Right Big Animation

Makes the HTML element slide off the page to the right.

 @-webkit-keyframes fadeOutRightBig < 0% < opacity: 1; -webkit-transform: translateX(0); >100% < opacity: 0; -webkit-transform: translateX(2000px); >> @-moz-keyframes fadeOutRightBig < 0% < opacity: 1; -moz-transform: translateX(0); >100% < opacity: 0; -moz-transform: translateX(2000px); >> @-ms-keyframes fadeOutRightBig < 0% < opacity: 1; -ms-transform: translateX(0); >100% < opacity: 0; -ms-transform: translateX(2000px); >> @-o-keyframes fadeOutRightBig < 0% < opacity: 1; -o-transform: translateX(0); >100% < opacity: 0; -o-transform: translateX(2000px); >> @keyframes fadeOutRightBig < 0% < opacity: 1; transform: translateX(0); >100% < opacity: 0; transform: translateX(2000px); >> .fadeOutRightBig 

CSS Bounce In Animation

Makes the HTML element bounce into view.

 @-webkit-keyframes bounceIn < 0% < opacity: 0; -webkit-transform: scale(.3); >50% < opacity: 1; -webkit-transform: scale(1.05); >70% < -webkit-transform: scale(.9); >100% < -webkit-transform: scale(1); >> @-moz-keyframes bounceIn < 0% < opacity: 0; -moz-transform: scale(.3); >50% < opacity: 1; -moz-transform: scale(1.05); >70% < -moz-transform: scale(.9); >100% < -moz-transform: scale(1); >> @-ms-keyframes bounceIn < 0% < opacity: 0; -ms-transform: scale(.3); >50% < opacity: 1; -ms-transform: scale(1.05); >70% < -ms-transform: scale(.9); >100% < -ms-transform: scale(1); >> @-o-keyframes bounceIn < 0% < opacity: 0; -o-transform: scale(.3); >50% < opacity: 1; -o-transform: scale(1.05); >70% < -o-transform: scale(.9); >100% < -o-transform: scale(1); >> @keyframes bounceIn < 0% < opacity: 0; transform: scale(.3); >50% < opacity: 1; transform: scale(1.05); >70% < transform: scale(.9); >100% < transform: scale(1); >> .bounceIn 

CSS Bounce In Right Animation

Makes the HTML element bounce in from the right of the page.

 @-webkit-keyframes bounceInRight < 0% < opacity: 0; -webkit-transform: translateX(2000px); >60% < opacity: 1; -webkit-transform: translateX(-30px); >80% < -webkit-transform: translateX(10px); >100% < -webkit-transform: translateX(0); >> @-moz-keyframes bounceInRight < 0% < opacity: 0; -moz-transform: translateX(2000px); >60% < opacity: 1; -moz-transform: translateX(-30px); >80% < -moz-transform: translateX(10px); >100% < -moz-transform: translateX(0); >> @-ms-keyframes bounceInRight < 0% < opacity: 0; -ms-transform: translateX(2000px); >60% < opacity: 1; -ms-transform: translateX(-30px); >80% < -ms-transform: translateX(10px); >100% < -ms-transform: translateX(0); >> @-o-keyframes bounceInRight < 0% < opacity: 0; -o-transform: translateX(2000px); >60% < opacity: 1; -o-transform: translateX(-30px); >80% < -o-transform: translateX(10px); >100% < -o-transform: translateX(0); >> @keyframes bounceInRight < 0% < opacity: 0; transform: translateX(2000px); >60% < opacity: 1; transform: translateX(-30px); >80% < transform: translateX(10px); >100% < transform: translateX(0); >> .bounceInRight 

CSS Bounce Out Animation

Makes the element bounce out of the screen.

 @-webkit-keyframes bounceOut < 0% < -webkit-transform: scale(1); >25% < -webkit-transform: scale(.95); >50% < opacity: 1; -webkit-transform: scale(1.1); >100% < opacity: 0; -webkit-transform: scale(.3); >> @-moz-keyframes bounceOut < 0% < -moz-transform: scale(1); >25% < -moz-transform: scale(.95); >50% < opacity: 1; -moz-transform: scale(1.1); >100% < opacity: 0; -moz-transform: scale(.3); >> @-ms-keyframes bounceOut < 0% < -ms-transform: scale(1); >25% < -ms-transform: scale(.95); >50% < opacity: 1; -ms-transform: scale(1.1); >100% < opacity: 0; -ms-transform: scale(.3); >> @-o-keyframes bounceOut < 0% < -o-transform: scale(1); >25% < -o-transform: scale(.95); >50% < opacity: 1; -o-transform: scale(1.1); >100% < opacity: 0; -o-transform: scale(.3); >> @keyframes bounceOut < 0% < transform: scale(1); >25% < transform: scale(.95); >50% < opacity: 1; transform: scale(1.1); >100% < opacity: 0; transform: scale(.3); >> .bounceOut 

CSS Bounce Out Down Animation

Makes the HTML element bounce down off the page.

 @-webkit-keyframes bounceOutDown < 0% < -webkit-transform: translateY(0); >20% < opacity: 1; -webkit-transform: translateY(-20px); >100% < opacity: 0; -webkit-transform: translateY(2000px); >> @-moz-keyframes bounceOutDown < 0% < -moz-transform: translateY(0); >20% < opacity: 1; -moz-transform: translateY(-20px); >100% < opacity: 0; -moz-transform: translateY(2000px); >> @-ms-keyframes bounceOutDown < 0% < -ms-transform: translateY(0); >20% < opacity: 1; -ms-transform: translateY(-20px); >100% < opacity: 0; -ms-transform: translateY(2000px); >> @keyframes bounceOutDown < 0% < transform: translateY(0); >20% < opacity: 1; transform: translateY(-20px); >100% < opacity: 0; transform: translateY(2000px); >> .bounceOutDown 

CSS Rotate In Down Left Animation

Makes the HTML element rotate in from the left.

 @-webkit-keyframes rotateInDownLeft < 0% < -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; >> @-moz-keyframes rotateInDownLeft < 0% < -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; >100% < -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; >> @-ms-keyframes rotateInDownLeft < 0% < -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; >100% < -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; >> @-o-keyframes rotateInDownLeft < 0% < -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; >100% < -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; >> @keyframes rotateInDownLeft < 0% < transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; >100% < transform-origin: left bottom; transform: rotate(0); opacity: 1; >> .rotateInDownLeft 

CSS Rotate In Up Left Animation

Makes the HTML element rotate in up from the left.

 @-webkit-keyframes rotateInUpLeft < 0% < -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; >> @-moz-keyframes rotateInUpLeft < 0% < -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; >100% < -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; >> @-ms-keyframes rotateInUpLeft < 0% < -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; >100% < -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; >> @-o-keyframes rotateInUpLeft < 0% < -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; >100% < -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; >> @keyframes rotateInUpLeft < 0% < transform-origin: left bottom; transform: rotate(90deg); opacity: 0; >100% < transform-origin: left bottom; transform: rotate(0); opacity: 1; >> .rotateInUpLeft 

CSS Hinge Animation

Makes the HTML element hinge on the top left corner and fall off the screen.

 @-webkit-keyframes hinge < 0% < -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; >20%, 60% < -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; >40% < -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; >80% < -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; >100% < -webkit-transform: translateY(700px); opacity: 0; >> @-moz-keyframes hinge < 0% < -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; >20%, 60% < -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; >40% < -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; >80% < -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; >100% < -moz-transform: translateY(700px); opacity: 0; >> @-ms-keyframes hinge < 0% < -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; >20%, 60% < -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; >40% < -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; >80% < -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; >100% < -ms-transform: translateY(700px); opacity: 0; >> @-o-keyframes hinge < 0% < -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; >20%, 60% < -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; >40% < -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; >80% < -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; >100% < -o-transform: translateY(700px); opacity: 0; >> @keyframes hinge < 0% < transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; >20%, 60% < transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; >40% < transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; >80% < transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; >100% < transform: translateY(700px); opacity: 0; >> .hinge 

CSS Roll In Animation

Makes the HTML element roll in.

 @-webkit-keyframes rollIn < 0% < opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); >100% < opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); >> @-moz-keyframes rollIn < 0% < opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); >100% < opacity: 1; -moz-transform: translateX(0px) rotate(0deg); >> @-ms-keyframes rollIn < 0% < opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); >100% < opacity: 1; -ms-transform: translateX(0px) rotate(0deg); >> @-o-keyframes rollIn < 0% < opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); >100% < opacity: 1; -o-transform: translateX(0px) rotate(0deg); >> @keyframes rollIn < 0% < opacity: 0; transform: translateX(-100%) rotate(-120deg); >100% < opacity: 1; transform: translateX(0px) rotate(0deg); >> .rollIn 

CSS Roll Out Animation

Makes the HTML element roll out.

 @-webkit-keyframes rollOut < 0% < opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); >100% < opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); >> @-moz-keyframes rollOut < 0% < opacity: 1; -moz-transform: translateX(0px) rotate(0deg); >100% < opacity: 0; -moz-transform: translateX(100%) rotate(120deg); >> @-ms-keyframes rollOut < 0% < opacity: 1; -ms-transform: translateX(0px) rotate(0deg); >100% < opacity: 0; -ms-transform: translateX(100%) rotate(120deg); >> @-o-keyframes rollOut < 0% < opacity: 1; -o-transform: translateX(0px) rotate(0deg); >100% < opacity: 0; -o-transform: translateX(100%) rotate(120deg); >> @keyframes rollOut < 0% < opacity: 1; transform: translateX(0px) rotate(0deg); >100% < opacity: 0; transform: translateX(100%) rotate(120deg); >> .rollOut 

Download Animate.css

I recommend you download the project from Github even if it’s just to look at the source code and learn all the different things you can do with CSS animations. You can get it right now from Github. Download Animation.css

Источник