01hd.bitbucket.org/css/animations/entry_animations.css
2017-02-25 14:30:36 -06:00

148 lines
2.2 KiB
CSS
Executable File

.entry {
animation: entry 2s ease 1 normal;
}
.entry-left {
animation: entry-left 4s ease 1 normal;
}
.entry-right {
animation: entry-right 4s ease 1 normal;
}
.entry-bottom {
animation: entry-bottom 4s ease 1 normal;
}
.typingAnimation {
overflow: hidden;
white-space: nowrap;
width: 8em;
animation:
typing 5s;
}
/* this is entering transition from left*/
@-webkit-keyframes entry-left {
from {
opacity: 0;
left: -800px;
}
}
@-moz-keyframes entry-left {
from {
opacity: 0;
left: -800px;
}
}
@-o-keyframes entry-left {
from {
opacity: 0;
left: -800px;
}
}
@keyframes entry-left {
from {
opacity: 0;
left: -800px;
}
}
/* this is entering transition from bottom */
@-webkit-keyframes entry-bottom {
from {
opacity: 0;
bottom: -600px;
}
}
@-moz-keyframes entry-bottom {
from {
opacity: 0;
bottom: -600px;
}
}
@-o-keyframes entry-bottom {
from {
opacity: 0;
bottom: -600px;
}
}
@keyframes entry-bottom {
from {
opacity: 0;
bottom: -600px;
}
}
/* this is entering transition from right*/
@-webkit-keyframes entry-right {
from {
opacity: 0;
right: -800px;
}
}
@-moz-keyframes entry-right {
from {
opacity: 0;
right: -800px;
}
}
@-o-keyframes entry-right {
from {
opacity: 0;
right: -800px;
}
}
@keyframes entry-right {
from {
opacity: 0;
right: -800px;
}
}
/* this is entering transition*/
@-webkit-keyframes entry {
from {
opacity: 0;
}
}
@-moz-keyframes entry {
from {
opacity: 0;
}
}
@-o-keyframes entry {
from {
opacity: 0;
}
}
@keyframes entry {
from {
opacity: 0;
}
}
/*Typing*/
@-webkit-keyframes typing {
from {
width: 0px;
}
}
@-moz-keyframes typing {
from {
width: 0px;
}
}
@-o-keyframes typing {
from {
width: 0px;
}
}
@keyframes typing {
from {
width: 0px;
}
}