css div animate coming from left bottom code example
Example 1: css top to bottom animation
//html code
<div id="topToBottom"></div>
//css code
#topToBottom {
animation: topToBottom ease 2s;
-webkit-animation: topToBottom ease 2s;
-moz-animation: topToBottom ease 2s;
-o-animation: topToBottom ease 2s;
-ms-animation: topToBottom ease 2s;
}
@keyframes topToBottom {
0% {
margin-top: -23%;
}
100% {
margin-top: 0%;
}
}
@-moz-keyframes topToBottom {
0% {
margin-top: -23%;
}
100% {
margin-top: 0%;
}
}
@-webkit-keyframes topToBottom {
0% {
margin-top: -23%;
}
100% {
margin-top: 0%;
}
}
@-o-keyframes topToBottom {
0% {
margin-top: -23%;
}
100% {
margin-top: 0%;
}
}
@-ms-keyframes topToBottom {
0% {
margin-top: -23%;
}
100% {
margin-top: 0%;
}
}
Example 2: css move animation
article {
animation-name : displaceContent;
animation-duration : 1s;
animation-delay : 4s;
animation-iteration-count : 1;
animation-fill-mode : forwards;
}
@keyframes displaceContent {
from { transform : translateY(0em) }
to { transform : translateY(3em) }
}