animation effect slide bottom to top css code example
Example: 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%;
}
}