delphimvcframework/samples/angularjs/www/lib/bootstrap_directive/styles/alert-notification-animations.css
daniele.teti 77f382b672
2013-11-14 10:08:02 +00:00

55 lines
1.7 KiB
CSS

/* ## Notification Keyframe Animations
*
* ## Usage
*
* ```css
* -webkit-animation: notification .75s linear;
* -moz-animation: notification .75s linear;
* -ms-animation: notification .75s linear;
* -o-animation: notification .75s linear;
* animation: notification .75s linear;
* ```
*/
@-webkit-keyframes notification {
0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
70% { -webkit-transform: rotateY(20deg); opacity: .8; }
90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
}
@-moz-keyframes notification {
0% { -moz-transform: rotateY(-90deg); opacity: 0; }
70% { -moz-transform: rotateY(20deg); opacity: .8; }
90% { -moz-transform: rotateY(-10deg); opacity: 1; }
100% { -moz-transform: rotateY(-0deg); opacity: 1; }
}
@-ms-keyframes notification {
0% { -ms-transform: rotateY(-90deg); opacity: 0; }
70% { -ms-transform: rotateY(20deg); opacity: .8; }
90% { -ms-transform: rotateY(-10deg); opacity: 1; }
100% { -ms-transform: rotateY(-0deg); opacity: 1; }
}
@-o-keyframes notification {
0% { -o-transform: rotateY(-90deg); opacity: 0; }
70% { -o-transform: rotateY(20deg); opacity: .8; }
90% { -o-transform: rotateY(-10deg); opacity: 1; }
100% { -o-transform: rotateY(-0deg); opacity: 1; }
}
keyframes notification {
0% { transform: rotateY(-90deg); opacity: 0; }
70% { transform: rotateY(20deg); opacity: .8; }
90% { transform: rotateY(-10deg); opacity: 1; }
100% { transform: rotateY(-0deg); opacity: 1; }
}
.notifications > div {
-webkit-animation: notification .75s linear;
-moz-animation: notification .75s linear;
-ms-animation: notification .75s linear;
-o-animation: notification .75s linear;
animation: notification .75s linear;
}