body{
margin:0;
padding:0;
background-color:#f1ff36;
font-family:verdana;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
a{
position:relative;
text-decoration:none;
border:2px solid transparent;
width:100px;
height:50px;
text-align:center;
line-height:50px;
display:inline-block;
font-size:24px;
color:#262626;
}
a:before{
content:'';
position:absolute;
top:-2px;
left:-2px;
width:0;
height:0;
background:transparent;
border:2px solid transparent;
}
a:hover:before{
animation:animate 1s linear forwards;
}
#keyframes animate{
0%{
width:0;
height:0;
border-top-color:#262626;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
50%{
width:100%;
height:0;
border-top-color:#262626;
border-right-color:#262626;
border-bottom-color:transparent;
border-left-color:transparent;
}
100%{
width:100%;
height:100%;
border-top-color:#262626;
border-right-color:#262626;
border-bottom-color:transparent;
border-left-color:transparent;
}
}
a:hover:after{
animation:animate2 1s linear forwards;
animation-delay:1s;
}
#keyframes animate2{
0%{
width:0;
height:0;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#262626;
}
50%{
width:0;
height:100%;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#262626;
border-left-color:#262626;
}
100%{
width:100%;
height:100%;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#262626;
border-left-color:#262626;
}
}
animate2 is not working at all tell me the error which is occuring in this code.
In this code as you can see there are two animations first animation is working fine but the second animation ie animate2 is not working at all. Tell me at which point I am making the mistake I am really confused and frustrated trying and trying to run this code but to no avail.
I think you forgot to add empty content block a:after
Take a look at this codepen
a:before, a:after {
Related
I have a code for a CSS slideshow that goes left and right upon hover. However, when I edit the code to place the images into the slideshow, nothing shows up. This is the slideshow and you can see a working version of it in the bottom left hand corner of the page here; however, I cannot get mine to do the same thing and load the images.
HTML:
<div class="all"><div class="trash"></div><div class="buttons"><div class="back"><div class="goleft"></div><div class="container"><div class="textne"><b>[DESCRIPTION]</b></div>
<div class="imagene"><img src="[IMAGE URL]"></div>
</div></div></div></div><div class="linku"><p>[LINK NAME]</p></div>
CSS:
*{background:none; border:none; margin:0;}
a.external:after {display:none!important;}
span.user-symbol {display:none!important;}
a {font-weight:normal!important;}
.gr-top{display:none;}
.gr-top h2 img{display:none;}
.gr-top h2{display:none;}
.gr-top span{display:none;}
.tri{display:none;}
.gr1{display:none;}
.gr2{display:none;}
.gr3{display:none;}
.commentslink, .prevlink{display:none;}
.hsep{display:none;}
.bottom {display:none;}
.list {display:none;}
.gr-box{
cursor:default;
z-index:99!important;
line-height:1.2em;
font-family:Lucida Console;
font-size:10px;
}
.gr-body, .text{
position:relative;
width:550px;
overflow:hidden;
margin:0px auto;
text-align:center;
}
.back{
width:500px;
height:300px;
background:transparent;
overflow:hidden;
margin-left:0px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
}
.container{
width:[CONTAINER WIDTH]px;
height:300px;
margin-left:0px;
text-align:left;
transition:all 5s linear 360s;}
.container:hover{
margin-left:-[MARGIN]px;
transition:all 5s linear;
}
.goleft {
position:absolute;
background:#000;
opacity:0;
width:200px;
height:300px;
z-index:9999;
cursor:url(http://orig09.deviantart.net/aa48/f/2015/327/f/2/arrow_by_codingtrash-d9hpzk9.png), auto; }
.goleft:hover + .container{
margin-left:0px;
transition:all 4s linear; }
.container u{
position:relative;
display:inline-block;
text-decoration:none;
width:100px;
height:150px;
overflow:hidden;
padding:50px 30px;
text-align:center; }
.imagene{
position:relative;
display:inline-block;
background:#777;
margin-top:8px;
margin-left:8px;
height:280px;
border:1px solid #333;
transition:all .4s;
}
.imagene img{
opacity:0.8;
height:280px;
transition:all .4s;
}
.imagene img:hover{
opacity:1;
}
.imagene:hover {
border:1px solid #fff; }
.textne{
position:relative;
display:inline-block;
background:#777;
margin-top:8px;
width:200px;
margin-left:8px;
height:280px;
border:1px solid #333;
transition:all .4s;
}
.textne b{
text-align:center;
color:white;
opacity:0.8;
font-weight: normal;
position:absolute;
padding:110px 50px;
transition:all .4s;
}
.trash {
position:absolute;
width:500px;
height:150px;
background:#999;
margin-top:75px;
z-index:-9;
border:1px solid #000;
}
.all {
margin-left:-10px;}
.linku{
display:inline-block;
height:30px;
border:1px solid #000;
color:#222;
margin-top:-1px;
margin-left:-30px;
text-align:left;
width:200px;
background:#999;
overflow:hidden;
transition:all .3s;
}
.linku:hover {
background:#888;
color:#000;
border:1px solid #fff;
border-top:1px solid #000;
}
.linku p{
text-align:center;
width:200px;
padding-top:10px;
transition:all .3s;
}
The code works fine. You need to include proper "width" and "margin" property in the container and container:hover css rule
I have attached a fiddle link.
.container{
width: 1700px;
height:300px;
margin-left:0px;
text-align:left;
transition:all 5s linear 360s;
}
.container:hover{
margin-left:-1015px;
transition:all 5s linear;
}
https://jsfiddle.net/karthick6891/z9atpexz/
Note: The whole carousel depends on lot of hardcoded values and you have to give proper image sizes to fit the content within it. Kindly look into some carousel's like slick carousel or owl carousel etc.,
I am currently learning web design from scratch and have begun attempting animations, specifically #keyframes. I was initially designing whilst just using chrome and made the foolish assumption that this would work across all browsers. After testing a more complex animation that worked in chrome, opera and firefox, I tried Internet Explorer/Edge and the opacity animation worked but the method I used for translation didn't. I am just editing the left value of a list item in order to "move" the list items across.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<meta content="text/html; charset=utf-8; width=device_width;" http-equiv="Content-Type" />
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="CSS\index\indexTesting.css"/>
</head>
<body>
<!--Navigation Bar-->
<div id="navigationBar">
<ul>
<li id="liAbout"><a>About</a></li>
<li id="liPortfolio"><a>Portfolio</a></li>
<li id="liServices"><a>Services</a></li>
<li id="liContact"><a>Contact</a></li>
<li id="liBlog"><a>Blog</a></li>
</ul>
</div>
<!--Navigation Bar-->
</body>
</html>
CSS with keyframe animation at the start:
#keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-o-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-webkit-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-moz-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-ms-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
html, body{
height:100%;
width:100%;
}
body{
margin:0;
padding:0;
border:0;
background-color:#0f0f0f;
}
#navigationBar{
position:relative;
margin:0;
padding:0;
height:100%;
top:0;
left:0;
right:0;
width:100%;
}
#navigationBar ul{
position:relative;
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
display:table;
width:49.8%;
left:50%;
height:5%;
top:6px;
}
#navigationBar li{
position:relative;
top:0;
left:0;
right:8px;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
width:20%;
-webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}
#navigationBar li a{
margin:0;
padding:0;
display:block;
text-align:center;
z-index:100;
color:rgba(255,255,255,1);
}
I am also linking to a jsfiddle so you can see the visual difference for the intended effect and the absence of effect within internet explorer. I attempted to change the meta tag to
http-equiv="X-UA-Compatible" content="IE=edge" based on a separate post but this also didn't work. I assume it is an issue due to me misunderstanding how the browser deals with "left".
Thanks for the help :)
Here is the solution:
#navigationBar ul{
position:relative;
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
display:table;
width:49.8%;
height:5%;
top:6px;
float: right;
-webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}
#navigationBar li{
position:relative;
top:0;
left:0;
right:8px;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
width:20%;
}
It works in Edge and IE.
To #navigationBar ul I have added float: right; and deleted left: 50%;; and moved your animation code from #navigationBar li to #navigationBar ul
#keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-o-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-webkit-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-moz-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
#-ms-keyframes listEntranceAnimation{
0%{
left:50%;
}
100%{
left:0;
}
}
html, body{
height:100%;
width:100%;
}
body{
margin:0;
padding:0;
border:0;
background-color:#0f0f0f;
}
#navigationBar{
position:relative;
margin:0;
padding:0;
height:100%;
top:0;
left:0;
right:0;
width:100%;
}
#navigationBar ul{
position:relative;
//margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
display:table;
width:49.8%;
//left:50%;
height:5%;
top:6px;
float: right;
-webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
-ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}
#navigationBar li{
position:relative;
top:0;
left:0;
right:8px;
margin:0;
padding:0;
display:table-cell;
vertical-align:middle;
width:20%;
}
#navigationBar li a{
margin:0;
padding:0;
display:block;
text-align:center;
z-index:100;
color:rgba(255,255,255,1);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="CSS\index\indexTesting.css"/>
<body>
<!--Navigation Bar-->
<div id="navigationBar">
<ul>
<li id="liAbout"><a>About</a></li>
<li id="liPortfolio"><a>Portfolio</a></li>
<li id="liServices"><a>Services</a></li>
<li id="liContact"><a>Contact</a></li>
<li id="liBlog"><a>Blog</a></li>
</ul>
</div>
<!--Navigation Bar-->
</body>
</html>
I have a small link with a thumbnail and an excerpt, using css transitions I want the thumbnail to fade out on hover and the excerpt to appear. I'm using % in oppose to pixels as I want my website responsive, however when I add this to my site the excerpt is spread out the width of the page as it has absolute positioning, below is a jfiddle, could anyone help me?
.col {
width:29%;
margin:0 auto;
}
.post-thumbnail {
position:relative;
float:left;
overflow:auto;
width:100%; height:278px;
background:#2F3B45;
}
.post-thumbnail img {
width:100%; height:223px;
padding:0; margin:0;
transition:opacity 0.3s ease-in-out;
-moz-transition:opacity 0.3s ease-in-out;
-webkit-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
}
.col:hover .post-thumbnail img {
opacity:0;
filter:alpha(opacity=00);
}
.post-excerpt {
width:100%;
z-index:9999;
opacity:1;
filter:alpha(opacity=1);
}
.post-excerpt p {
text-align:justify;
color:#a3aaac;
font-family:'Open Sans', helvetica, arial, sans-serif;
font-size:9pt; font-weight:200;
line-height:18pt;
text-decoration:none; width:100%;
}
.col:hover .post-excerpt {
opacity:1;
filter:alpha(opacity=1);
}
.post-title {
position:absolute;
bottom:0px; left:0px;
width:100%; height:55px;
background:#ff0000; z-index:9999;
text-align:center; line-height:52px;
}
.post-title a {
font-family:'Open Sans', helvetica, arial, sans-serif;
font-size:10pt; font-weight:200;
color:#000; text-decoration:none;
}
.post-more {
position:absolute;
bottom:0px; left:0px;
width:100%; height:0px;
background:#ff0000;
opacity:0.0;
filter:alpha(opacity=00);
}
.col:hover .post-title {
cursor:pointer;
position:absolute;
bottom:0px; left:0px;
width:100%; height:95px;
background:#ff0000; line-height:44px;
}
.col:hover .post-more {
cursor:pointer;
position:absolute;
bottom:0px; left:0px;
width:100%; height:47px;
background:#fff url(http://liamhodnett.com/img/new/read-entry.png)top left no-repeat;
z-index:99999;
}
http://jsfiddle.net/P3k9A/
Thanks guys!
Set the parent to relative, then set the children to absolute.
Here are the ones I changed:
.col {
width:29%;
margin:0 auto;
position:relative; /* <- here */
}
.post-thumbnail {
position:absolute; /* <- here */
top: 0px;
float:left;
overflow:auto;
width:100%; height:278px;
background:#2F3B45;
}
.post-excerpt {
position: absolute; /* <- here */
width:100%;
z-index:9999;
opacity:0;
filter:alpha(opacity=0);
}
I believe this is what you were after: http://jsfiddle.net/P3k9A/1/
(I also changed the opacity to 0 on the excerpt in the fiddle).
I have a CSS question with this image hover effect - "Fiddle". I can't use width 100% in .img-overlay to get the overlay to cover the whole areas of the two pictures, so I have to use width:138px for the first one and width:300px for the second. In doing so, I end up making 4 more classes (.img-overlay2 .img-overlay2.2 .img-overlay2 h4 .img-overlay2 p, .img-wrap:hover .img-overlay2) Is there a more concise way to achieve that? Can I avoid some of the duplication?
CSS
.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.img-overlay2{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:300px;
height:100%;
z-index:1000;
}
.img-overlay2.2{
width:100%;
}
.img-overlay2 h4, .img-overlay2 p{
padding:0 10px;
}
.img-wrap:hover .img-overlay2{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
You can try to use something like this http://jsfiddle.net/EyAdp/
HTML:
<div class="a image"><div class="overlay"></div></div>
<div class="b image"><div class="overlay"></div></div>
CSS:
.a {
width:150px;
height:60px;
background-image:url("http://placekitten.com/150/60");
}
.b {
width:100px;
height:50px;
background-image:url("http://placekitten.com/100/50");
}
.image {
position:relative;
}
.overlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.overlay:hover {
background-color:rgba(1,1,1,0.3);
}
yes... you can avoid the duplications easily. see the following approach:
.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
height:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.img-overlay138{
width:138px;
}
.img-overlay300{
width:300px;
}
and you html:
<div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/products/payday-2-4-pack/boxart/small-payday-2-4-pack_boxart_tall-136x159.jpg' alt="bbh"/></a><div
class="img-overlay img-overlay138">
<p>dfdfdf</div></div>
<div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/smallofferboxes/2013/09/13/Voucher-Low-offer-box04_.jpg' alt="ddfdf"/></a><div
class="img-overlay img-overlay300">
<p>dfdfdf
</div></div>
If you need to keep the class names - without changing your markup or CSS much, you can reduce the duplication by defining common attributes once, then overriding specific attributes later in your stylesheet:
Demo Fiddle
.img-overlay,
.img-overlay2 {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay2 {
width:300px;
}
.img-overlay h4, .img-overlay p,
.img-overlay2 h4, .img-overlay2 p {
padding:0 10px;
}
.img-wrap:hover .img-overlay,
.img-wrap:hover .img-overlay2 {
opacity:0.75;
filter: alpha(opacity=75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
By adding two additional class definitions and adding them to your overlay elements while removing references to img-overlay2:
Demo Fiddle
HTML:
<div class="img-overlay small">...
<div class="img-overlay large">...
CSS:
.img-wrap {
overflow:hidden;
position:relative;
}
.img-overlay {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay.small {
width: 138px;
height: 159px;
}
.img-overlay.large {
width: 300px;
height: 120px;
}
.img-overlay h4, .img-overlay p {
padding:0 10px;
}
.img-wrap:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
If you can apply dimensions on your img-wrap element, you could change to something like this:
Demo Fiddle
HTML:
<div class="img-wrap small">…</div>
<div class="img-wrap large">…</div>
CSS:
.img-wrap {
overflow:hidden;
position:relative;
}
.img-wrap.small {
width: 138px;
height: 159px;
}
.img-wrap.large {
width: 300px;
height: 120px;
}
.img-overlay {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:100%;
height:100%;
z-index:1000;
}
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!
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!