Smooth CSS3 animation

Question

I am attempting to replace an ugly "scroll down" arrow in the "Hero" section of a web page with a more subtle way of allowing the user to understand that there is more content to read below. The idea I am toying with is continuously and smoothly transitioning the height of the hero section between two states.

Something like this...

h1,h2{text-align:center;}
#hero
{
 animation-delay:200ms;
 animation-duration:3s;
 animation-iteration-count: infinite;
 animation-name:herobounce;
 animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.5);  
 background-color:yellow;
 height:100vh;
}
#content
{
 padding:1em;
 padding-top:0;
 background-color:blue;
}
@keyframes herobounce
{
 from{height:100vh;}   
 to{height:75vh;}
}

<div id='hero'>
<h1>I am a hero</h1>
</div>
<div id='content'>
<h2>Please read me too!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non tincidunt nisl, id fringilla risus. Fusce scelerisque ultrices posuere. Fusce et sodales massa. Nunc vulputate accumsan arcu vitae vestibulum. Nulla tempus, mi mattis tristique rhoncus, libero lorem gravida nisl, et efficitur nibh ligula ut velit. Sed sed lobortis dui. Praesent commodo odio imperdiet, molestie lacus ac, vulputate orci. Quisque blandit felis eu nunc faucibus tempus. Praesent nec interdum justo. Morbi consectetur diam est, a consequat velit ultricies vitae.
</p><p>
Mauris a tellus pulvinar, ullamcorper mi ac, malesuada mi. Quisque gravida dui ut aliquet gravida. Nunc sed risus commodo, convallis mi ac, iaculis velit. Quisque pellentesque imperdiet nisi et elementum. Sed nec pharetra velit, sed aliquet lectus. Donec hendrerit ante sit amet turpis vestibulum tincidunt sed fermentum turpis. Vestibulum eu turpis volutpat, ornare urna nec, bibendum quam. Maecenas mauris nisi, maximus nec lectus eu, viverra convallis tortor. Sed et lacinia metus, eu ornare arcu.
</p><p>
Maecenas id fringilla mauris, id luctus mauris. Curabitur metus dui, molestie ut rutrum vitae, auctor ut turpis. Aliquam lorem erat, imperdiet in imperdiet ut, hendrerit vel erat. Nunc eros purus, commodo ac blandit id, fringilla tempor ligula. Praesent pellentesque sodales metus, in ultrices lacus eleifend sit amet. Maecenas aliquet sapien molestie enim commodo ornare. Vivamus venenatis sem ac arcu cursus finibus. Morbi gravida mauris in arcu hendrerit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut augue eros, varius et purus a, rutrum imperdiet sapien. Nunc at odio sit amet sem tristique tempus non ac leo. Nunc cursus augue ultricies mi rhoncus, vitae tempor ante blandit. Vestibulum eros sem, lacinia sit amet augue vitae, efficitur laoreet augue. Nulla id dictum tortor.
</p><p>
Donec vulputate quam vel lorem consequat auctor. Nullam dignissim dui eget massa hendrerit, vitae feugiat enim interdum. Sed sagittis elit a tortor lobortis, in tincidunt felis consequat. Donec id felis urna. Donec eget lorem purus. Proin pulvinar felis finibus magna aliquam porta. Praesent imperdiet eu metus id condimentum. Duis consequat nunc sit amet nisi tempus, quis sollicitudin tellus blandit. Donec vel laoreet tortor, in viverra ipsum. In hac habitasse platea dictumst. Fusce pellentesque mi vestibulum mollis laoreet. Integer dignissim urna vitae dapibus congue. Nunc vel lobortis enim, sed tristique libero. In nec enim ut libero vestibulum vestibulum et vel nisl. In sapien nunc, gravida eget pretium non, aliquam id turpis.
</p><p>
Pellentesque quis metus lacus. Mauris faucibus purus magna, in tristique eros tristique sed. Aenean faucibus, tortor nec fringilla maximus, ipsum arcu egestas eros, nec bibendum arcu neque ut lectus. Nullam tincidunt dapibus elit, varius dignissim felis venenatis ut. Curabitur placerat neque quis fringilla fringilla. Aliquam eu lobortis nunc, sed aliquet nibh. Praesent placerat, libero ut sollicitudin auctor, lacus lectus imperdiet metus, a maximus erat turpis non sem. In molestie sapien non leo accumsan ultricies. Fusce a neque arcu. Nulla varius augue risus, eu viverra dolor mollis sit amet. Sed mattis risus sed leo.</p>
</div>

whilst this works and the transition is continuous it is not smooth - the hero section shrinks gradually and smoothly and then abruptly drops back to its full height. I am a novice when it comes to CSS animation so I am fairly sure that the issue is down to the way I am animating. How can I improve the end result?

Answer 1

You could try:

@keyframes herobounce { 0%, 100% {height:100vh;} 50% {height:75vh;} }

This would start your animation with 100vh and then transition to 75vh at 50% of your animation, then going back to 100vh.