0

After much Googling and fiddling with various different options, I'm struggling to get my CSS3 Animation to behave in the way I want it to!

Let me start with the code

<html>
<head>
<style>
body
{
overflow:hidden;
margin:0px;
}
.about
{
overflow:hidden;
width:400%;
height:95%;
background:#10b4ff;
position:absolute;
animation-name:contentPane;
animation-duration:5s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:contentPane;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes contentPane
{
0%   {background:#eeeeee; left:0px; top:0px;}
33% {background:#10b4ff; left:-100%; top:0px;}
66%   {background:#eeeeee; left:-200%; top:0px;}
100% {background:#10b4ff; left:-300%; top:0px;}
}

@-webkit-keyframes contentPane
{
0%   {background:#eeeeee; left:0px; top:0px;}
33% {background:#10b4ff; left:-100%; top:0px;}
66%   {background:#eeeeee; left:-200%; top:0px;}
100% {background:#10b4ff; left:-300%; top:0px;}
}
.menuMarker{
width:20px;
height:20px;
border:2px solid #fff;
background:#fff;
border-radius:50%;
bottom:7%;
position:absolute;
/* Animation */
animation-name:menuMarker;
animation-duration:5s;
animation-timing-function:ease;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:menuMarker;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes menuMarker
{
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;}
33% {background:#eeeeee;  border:#10b4ff 2px solid; border-radius:30%; left:37.5%;}
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;}
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;}
}

@-webkit-keyframes menuMarker
{
0% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:12.5%;}
33% {background:#eeeeee;  border:#10b4ff 2px solid; border-radius:30%; left:37.5%;}
66% {background:#10b4ff; border:#eeeeee 2px solid; border-radius:50%; left:62.5%;}
100% {background:#eeeeee; border:#10b4ff 2px solid; border-radius:30%; left:87.5%;}
}

.one{
width:25%;
height:100%;
left:0px;
top:0px;
position:absolute;
color:#10b4ff;
}
.two{
width:25%;
height:100%;
left:25%;
top:0px;
position:absolute;
color:#eeeeee;
}
.three{
width:25%;
height:100%;
left:50%;
top:0px;
position:absolute;
color:#10b4ff;
}
.four{
width:25%;
height:100%;
left:75%;
top:0px;
position:absolute;
color:#eeeeee;
}
.menuOne{
border-top:2px #fff solid;
left:0%;
width:25%;
height:5%;
bottom:0px;
background:#10b4ff;
position:fixed;
}
.menuTwo{
border-top:2px #fff solid;
left:25%;
width:25%;
height:5%;
bottom:0px;
background:#eeeeee;
position:fixed;
}
.menuThree{
border-top:2px #fff solid;
left:50%;
width:25%;
height:5%;
bottom:0px;
background:#10b4ff;
position:fixed;
}
.menuFour{
border-top:2px #fff solid;
left:75%;
width:25%;
height:5%;
bottom:0px;
background:#eeeeee;
position:fixed;
}

</style>
</head>
<body>

<div class='about'>
<div class='one'>Test 1</div>
<div class='two'>Test 2</div>
<div class='three'>Test 3</div>
<div class='four'>Test 4</div>
</div>
<div class='menuMarker'></div>
<div class='menuOne'><center>About</center></div>
<div class='menuTwo'>Gallery</div>
<div class='menuThree'>Showreel</div>
<div class='menuFour'>Contact</div>
</body>
</html>

So here's the thing. I tried to add make all the animation-play-state properties "paused" and then add:

menuOne:hover
{
animation-name:menuMarker;
animation-play-state:running;
}

Problem is, this predictably makes the menuOne class behave as if it's the marker. What I'm looking for is a way of hovering over the different menu items (menuOne, menuTwo etc) and have the marker move to it's position over that item.

Am at a complete loss, and would LOVE some help!

Thanks guys and gals!

Dan
  • 524
  • 1
  • 5
  • 17

1 Answers1

0

First, don't use center tags. There are much better ways to position things in the middle, in your case that would be giving the menus text-align:center;

The closest you can get using your pure CSS animation is something like this, where the animations pause when the menu is hovered over. Your animation runs in a loop, and currently in CSS3 you're not allowed to restart the animation at a different point, so you can't do it well.

That being said, you can add simple transitions ALONG with your animation and get a much more desirable result like this one! It has some glitches, but you can likely play around with it to get a little bit smoother. But again, since CSS3 does not allow animations to be started mid-animation, it won't be perfect. If you used javascript as well it could be done a fair bit smoother, but you didn't mention that in your question

Here is the updated CSS and slightly modified HTML

<html>
<head>
<style>
body {
    overflow:hidden;
    margin:0px;
}
.about {
    overflow:hidden;
    width:400%;
    height:95%;
    background:#10b4ff;
    position:absolute;
    animation-name:contentPane;
    animation-duration:15s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:contentPane;
    -webkit-animation-duration:15s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;

    transition: all .5s linear;
    -webkit-transition: all .5s linear;
}
@keyframes contentPane {
    0% {
        background:#eeeeee;
        left:0px;
    }
    33% {
        background:#10b4ff;
        left:-100%;
    }
    66% {
        background:#eeeeee;
        left:-200%;
    }
    100% {
        background:#10b4ff;
        left:-300%;
    }
}
@-webkit-keyframes contentPane {
    0% {
        background:#eeeeee;
        left:0px;
    }
    33% {
        background:#10b4ff;
        left:-100%;
    }
    66% {
        background:#eeeeee;
        left:-200%;
    }
    100% {
        background:#10b4ff;
        left:-300%;
    }
}
.menuMarker {
    width:20px;
    height:20px;
    border:2px solid #fff;
    background:#fff;
    border-radius:50%;
    bottom:7%;
    position:absolute;
    /* Animation */
    animation-name:menuMarker;
    animation-duration:15s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:menuMarker;
    -webkit-animation-duration:15s;
    -webkit-animation-timing-function:ease;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;

    transition: all .5s linear;
    -webkit-transition: all .5s linear;
}
@keyframes menuMarker {
    0% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:12.5%;
    }
    33% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:37.5%;
    }
    66% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:62.5%;
    }
    100% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:87.5%;
    }
}
@-webkit-keyframes menuMarker {
    0% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:12.5%;
    }
    33% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:37.5%;
    }
    66% {
        background:#10b4ff;
        border:#eeeeee 2px solid;
        border-radius:50%;
        left:62.5%;
    }
    100% {
        background:#eeeeee;
        border:#10b4ff 2px solid;
        border-radius:30%;
        left:87.5%;
    }
}
.one {
    width:25%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    color:#10b4ff;
}
.two {
    width:25%;
    height:100%;
    left:25%;
    top:0;
    position:absolute;
    color:#eeeeee;
}
.three {
    width:25%;
    height:100%;
    left:50%;
    top:0;
    position:absolute;
    color:#10b4ff;
}
.four {
    width:25%;
    height:100%;
    left:75%;
    top:0;
    position:absolute;
    color:#eeeeee;
}
.menu {
    position:absolute;
    bottom:0;
    text-align:center;
    width:25%;
    height:5%;
    background:#10b4ff;
}
.menuOne {
  left:0;
}
.menuTwo {
  left:25%;
}
.menuThree {
  left:50%;
}
.menuFour {
  left:75%;
}
.menu:nth-child(even) {
    background:#eeeeee;
}
.menu:hover ~ .menuMarker {
    animation:none;
    -webkit-animation: none;
}
.menu:hover ~ .about {
    animation: none;
    -webkit-animation:none;
}
.menuOne:hover ~ .about {
    background:#eeeeee;
    left:0px;
}
.menuTwo:hover ~ .about {
    background:#10b4ff;;
    left:-100%;
}
.menuThree:hover ~ .about {
    background:#eeeeee;
    left:-200%;
}
.menuFour:hover ~ .about {
    background:#10b4ff;
    left:-300%;
}
.menuOne:hover ~ .menuMarker {
    background:#10b4ff;
    border:#eeeeee 2px solid;
    border-radius:50%;
    left:12.5%;
}
.menuTwo:hover ~ .menuMarker {
    background:#eeeeee;
    border:#10b4ff 2px solid;
    border-radius:30%;
    left:37.5%;
}
.menuThree:hover ~ .menuMarker {
    background:#10b4ff;
    border:#eeeeee 2px solid;
    border-radius:50%;
    left:62.5%;
}
.menuFour:hover ~ .menuMarker {
    background:#eeeeee;
    border:#10b4ff 2px solid;
    border-radius:30%;
    left:87.5%;
}
</style>
</head>

<body>
<div class='menu menuOne'>About</div><!--
--><div class='menu menuTwo'>Gallery</div><!--
--><div class='menu menuThree'>Showreel</div><!--
--><div class='menu menuFour'>Contact</div>
<div class='about'>
    <div class='one'>Test 1 </div>
    <div class='two'>Test 2</div>
    <div class='three'>Test 3</div>
    <div class='four'>Test 4</div>
</div>
<div class='menuMarker'></div>
</body>
</html>

I changed your HTML structure because you use position:absolute anyway and it made selecting the .about and .menuMarker easier

Side note: You don't have to declare the same top:0px; for your animations. If you don't tell it to change it won't. Also in CSS if you have a pixel value of 0 you can leave it off if you'd like, aka top:0 = top:0px

If you have any questions let me know!

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • Right, I've been playing around with it, and it's working much more how I'd like. Having changed the play-state properties to paused, I can hover over the menu item and it selects the displays the correct content. However, when stop hovering over it, it returns to the first menu item. Any ideas how I could stop that happening? – Dan Aug 07 '13 at 10:19
  • I *believe* you could use an approach [like this one](http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/) that I found the other day to start on a different keyframe than it originally was, but I haven't attempted to use it yet (hadn't had time) and it could be that I'm wrong. It might be more involved than you're used to doing yourself – Zach Saucier Aug 07 '13 at 20:13
  • I asked a question (and ended up solving the issue myself) based on what you, I, and others are trying to do using the approach I mentioned, it could be of use. [Check it out here](http://stackoverflow.com/questions/18006099/get-current-keyframes-percentage) – Zach Saucier Aug 13 '13 at 03:17
  • Like the idea, the only problem is I'm trying to avoid using jQuery if possible. But will give it a go and let you know how I get on! Thanks Zeaklous! – Dan Aug 13 '13 at 08:53
  • The solution doesn't have any jQuery, just the question because I was unsure as to how to go about it – Zach Saucier Aug 13 '13 at 13:24
  • Did I end up answering your question? – Zach Saucier Sep 11 '13 at 03:39
  • Hi Zeak. Not entirely, but it has given me a pretty good idea, which I'm working on. As soon as I've worked it out, I'll post back here! – Dan Sep 11 '13 at 07:19
  • @DanB Did you end up resolving your issue? – Zach Saucier Jan 01 '14 at 18:10