You can run something like this. This sets the opacity
to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Wait for it...