Hi!

 

I've been working on my new portfolio page and have came across a little problem, when I use CSS animation is takes away my list styling on my <LI> tags! Which causes it to just drop down each line instead of being inline.

 

Could any of you help me with this?

 

www.jakerobertpowney.co.uk

 

Cheers

Can anyone help ?

 

Here is the HTML Code -

<div class="navigation">
  <div class="container">
    <div class="navigationWrapper">
    <ul>
      <li>Home</li>
      <li>About me</li>
      <li><img src="img/logo.png" id="logo"></li>
      <li>My work</li>
      <li>Blog</li>
    </ul>
    </div>
  </div>
</div> 

And here is the css -

 

.navigation ul {
  text-align: center;
}

.navigation li {
    display: inline-block;
    white-space:nowrap;
    overflow:hidden;
}

.navigation li:nth-child(1) {
     -webkit-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -webkit-animation-delay:2s;
      -webkit-animation-fill-mode:both;
      -moz-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -moz-animation-delay:2s;
      -moz-animation-fill-mode:both;
}

.navigation li:nth-child(2){
     -webkit-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -webkit-animation-delay:4s;
      -webkit-animation-fill-mode:both;
      -moz-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -moz-animation-delay:4s;
      -moz-animation-fill-mode:both;
}


.navigation li:nth-child(3){
     -webkit-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -webkit-animation-delay:6s;
      -webkit-animation-fill-mode:both;
      -moz-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -moz-animation-delay:6s;
      -moz-animation-fill-mode:both;
}

.navigation li:nth-child(4){
     -webkit-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -webkit-animation-delay:9s;
      -webkit-animation-fill-mode:both;
      -moz-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -moz-animation-delay:9s;
      -moz-animation-fill-mode:both;
}
.navigation li:nth-child(5){
     -webkit-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -webkit-animation-delay:11s;
      -webkit-animation-fill-mode:both;
      -moz-animation: typing 2s steps(26, end), 
                          blink-caret 1s step-end infinite;
      -moz-animation-delay:11s;
      -moz-animation-fill-mode:both;
}

 

 

Hi Might be because you've set the display property to inline-block? Here is something from stackoverflow - http://stackoverflow.com/questions/13459920/css3-animation-doesnt-work-is-display-property-is-set-to-inline

 

P.S. Good idea for animation, by the way.

Edited May 31, 201412 yr by teodora

Your typing animation sets an elements width from 0 to 400px. The navigationWrapper is only 500px so the list items are dropping to their own line.

Thank-you for replying! I found it out just a little after asking aha!

 

It needed a 'display: inline-flex' to be set on the ul tag.

 

I have made some progress since then if you want to have a look, because I ran into a new problem. As you see at the bottom in the editor some of the lines are cutting off. I don't know how to fix this, if you have any idea?

 

+ Thanks, teodora!

You may want to remove the inline-flex as you've set it on .navigation ul which doesn't exist You solved the problem with a max-width on your list items.

For the editor text, you'll need to increase the width of the typing animation.

@-webkit-keyframes typing {
    from { width: 0; }
    to { width: 400px; } //increase this
}

@-moz-keyframes typing {
    from { width: 0; }
    to { width: 400px; } //increase this
}

 

I don't know why I added inline-flex actually in there, oops!

 

But thank's for that, I completely forgot about setting the width on them earlier, cheers

@@JRP You're welcome I actually didn't notice it was an inline-flex, thought it was inline-block!

Glad you managed to sort it, I just had a look at the site and I like it, the idea is good (as I said).

 

//off topic Flex is great, the only thing that stops me from using it is the browser support - I use jQuery solutions...

Yeah I can see why you would use jQuery solutions for more broswer support, I'll have to look into them them more

 

Just now got to work on the rest of the site in my spare time, I'll post it up once it's finished.