css animations inside inline blocks

css animations inside inline blocks

I am currently building a template that will be the foundation on my new
website and have reached the point of adding the animations and other
'special effects'. For basis to my template I am using the Boilerplate
h5bp template and my header element is built of inline-blocks thus -
<header>
<div class="box" id="head-one">
<h1>Your name here</h1>
<h2>Click to call <a
href="tel:your-phone-number">your-phone</a> or <a
href="mailto:you@your-domain.what.where?subject=Message%20subject%20here&body=Some%20text%20to%20add%20to%20the%20message%20body.">Email
Us</a></h2>
<nav>
<ul class="menu">
<li><a href="index.html">Page 1</a></li>
<li><a href="accordion.html">Page 2</a></li>
<li><a href="boxs.html">Page 3</a></li>
<li><a href="images.html">Page 4</a></li>
</ul>
</nav>
</div><!-- close class box id head-one
--><div class="box" id="head-two"><!--
--><img id="logo-head" src="images/logo.svg" alt="Logo for
your web site">
</div><!-- close class box id head-two -->
</header>
This is how I have done the css alignment (The colours being used are
purely to highlight box sizes and alignments at this stage) -
header
{
border: 0.5em solid blue;
box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: justify;
padding: 1em 0.5em 0em 0.5em;
margin: 5px auto;
}
nav,
ul.menu,
ul.menu li
{
display: inline-block;
}
#logo-head
{
width: 200px;
height: 200px;
padding: 0.5em;
}
div.box#head-two
{
width: 100%;
height: 100%;
text-align:center;
display: inline-block;
animation:logo 5s linear 0.3s 3;
-webkit-animation:logo 5s linear 0.3s 3;
}
@keyframes logo
{
0% {transform:rotate(0deg);}
25% {transform:rotate(90deg);}
50% {transform:rotate(180deg);}
100% {transform:rotate(360deg);}
}
@-webkit-keyframes logo
{
0% {-webkit-transform:rotate(0deg);}
25% {-webkit-transform:rotate(90deg);}
50% {-webkit-transform:rotate(180deg);}
100% {-webkit-transform:rotate(360deg);}
}
div.box#head-one
{
width: 75%;
text-align: center;
}
header::after
{
content: '';
width: 100%;
display: inline-block;
}
header div.box#head-one::before
{
content: '';
height: 100%;
width: 100%;
vertical-align: middle;
}
However the animation is pushing the logo contained in 'header
div.box#head-two' to the bottom of the header box instead of up on the
right side, without the animation the logo sits nicely vertically aligned
- middle and to the right of the rest of the header content.
How can I stop this basic animation from breaking my structure, this is an
important problem for me to solve on this project as page layouts depend
on the inline-block display value.