css3 keyframes ease in box then ease out.

HTML

<div id="content">
        <span class="aniamte"></span>
</div>

CSS

@keyframes reset {
0% {
	opacity: 0;
}
100% {
	opacity: 0;
}
}

@keyframes fade-in {
0% {
	opacity: 0;
}
60% {
	opacity: 0;
}
100% {
	opacity: 1;
}
}

.aniamte {
    background: red;
    display: inline-block;
    height: 100px;
    width: 100px;
	animation-name: reset, fade-in;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 5;
    animation-delay: 0, 1s;   
    animation-direction:alternate;
}