I have a html and in this html i have created a pacman game. In this game my pacman is eating a div having yellow background. But i want my pacman to eat image instead of div.For example on first div food-1 i want to place image abc1.jpg and for food-2 div the image should be abc2.jpg and so on.I tried my best but not able to do so. Please help me to achieve this.
Here my code.
pakman.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<div class="food food-1"></div>
<div class="food food-2"></div>
<div class="food food-3"></div>
<div class="food food-4"></div>
<div class="food food-5"></div>
<div class="food food-6"></div>
<div class="food food-7"></div>
<div class="food food-8"></div>
<div class="food food-9"></div>
<div class="food food-10"></div>
<div class="food food-11"></div>
</div>
</body>
</head>
</html>
and my css file is
pac.css
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:10px;
height:10px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
#-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
Here is my jsfiddle
Should be as easy as changing the div to and img tag and adding a src attribute:
<img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>
See the leftmost one: https://jsfiddle.net/4xLu5szz/5/
"Use Image tag"
Example :
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
CODE HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTVAbva29vJgnTKwTJmda-Rvod1hxx0NyCV_m9eeSNXJotaBD-" class="food food-1"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMR5x8vDhDIz7ydtIsCGjOg8HY30fCfW-eEFsI7kydkv93yQJq " class="food food-2"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKovb82eqcasgtuu1vNMcQrwmno1ebHR6_OGhQKN2Ahq2edADr" class="food food-3"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5xr4UoU50LojizDjBXPiWodrHzKALt_AwQvWbRyZuu5j-itGZ" class="food food-4"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlP6-Z7AX4P-0HCFN2RCiBMQo-H6ljKWBX84DN-Jl92tzRPiCnww " class="food food-5"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_D8ibrS1OwZKqeHeA_8jl4dFcWPqHAPZ9hUdClrvDZvyhaFID" class="food food-6"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwib9lxt-zKm9NOqIJzRR8UOCiIv03si25pS3x5_iuJejoaZLv" class="food food-7"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvjZH6-vKtV-s2W5cgXTnchAgS9TYAcXj7U48XE_MNxJRe56vS" class="food food-8"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcJSD2u8YexpOp1GL3STmhrYt0LnTDy2o9YhfICu2DX0QCpCIn " class="food food-9"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdzRd944Fdkw4_fDcmmSH__EqJbItKn9tNoFLu906ZNxxSPvmMdA" class="food food-10"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSY6Z0MZA7eRpyMln8oWWszO-uDAI5be3omIn0BhmB1YNEXH80tg " class="food food-11"/>
</div>
</body>
</head>
</html>
CSS:
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:20px;
height:20px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
#-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
#-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
#-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
#-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
#keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
Related
I have a question. I wanted to use a button from codepen.io on my website (this one: https://codepen.io/emared/pen/RYgbaJ/). Everything works with the button but it appears on the end of my website. I want it to be just below my text. Here's my code:
<h3 style="padding-top: 35;">
Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
And in my CSS-Document I just pasted everything from the codepen page.
Now this is what it looks like: https://ibb.co/G3cmGdQ
Why's there that huge space between "Text" and the button?
Thanks for your help! 🙏
Look at the following code:
#import url('https://fonts.googleapis.com/css?family=Montserrat:900');
body{
margin:0;
padding:0;
background-color:#292929;
font-family: 'Montserrat', sans-serif;
}
.heading {
text-align: center;
margin-top: 50px;
color: #fff;
}
#wrapper{
margin-bottom: 30px;
width:100vw;
height:100vh;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
}
.my-super-cool-btn{
position:relative;
text-decoration:none;
color:#fff;
letter-spacing:1px;
font-size:2rem;
box-sizing:border-box;
}
.my-super-cool-btn span{
position:relative;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:200px;
height:200px;
}
.my-super-cool-btn span:before{
content:'';
width:100%;
height:100%;
display:block;
position:absolute;
border-radius:100%;
border:7px solid #F3CF14;
box-sizing:border-box;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn:hover span:before{
transform:scale(0.8);
box-shadow: 0 20px 55px rgba(0,0,0,0.14), 0 15px 35px rgba(0,0,0,0.14);
}
.my-super-cool-btn .dots-container{
opacity:0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot{
width:8px;
height:8px;
display:block;
background-color:#F3CF14;
border-radius:100%;
position:absolute;
transition: all .85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1){
top:50px;
left:50px;
transform:rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(2){
top:50px;
right:50px;
transform:rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(3){
bottom:50px;
left:50px;
transform:rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn .dot:nth-child(4){
bottom:50px;
right:50px;
transform:rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity:0;
}
.my-super-cool-btn:hover .dot:nth-child(1){
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2){
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3){
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4){
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes swag1 {
0% {
top:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag1-out {
0% {
top:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag2 {
0% {
top:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag2-out {
0% {
top:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
top:50px;
right:50px;
width:8px;
opacity:0;
}
}
#keyframes swag3 {
0% {
bottom:50px;
left:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
left:20px;
width:8px;
opacity:1;
}
}
#keyframes swag3-out {
0% {
bottom:20px;
left:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
left:50px;
width:8px;
opacity:0;
}
}
#keyframes swag4 {
0% {
bottom:50px;
right:50px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:20px;
right:20px;
width:8px;
opacity:1;
}
}
#keyframes swag4-out {
0% {
bottom:20px;
right:20px;
width:8px;
}
50% {
width:30px;
opacity:1;
}
100% {
bottom:50px;
right:50px;
width:8px;
opacity:0;
}
}
<h3 class="heading">Text goes here</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
Please check the code below:
#import url("https://fonts.googleapis.com/css?family=Montserrat:900");
body {
margin: 0;
padding: 0;
background-color: #292929;
font-family: "Montserrat", sans-serif;
}
.title {
text-align: center;
color: #fff;
font-size: 50px;
padding-top: 35px;
margin: 0;
}
#wrapper {
margin-bottom: 30px;
width: 100vw;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.my-super-cool-btn {
position: relative;
text-decoration: none;
color: #fff;
letter-spacing: 1px;
font-size: 2rem;
box-sizing: border-box;
}
.my-super-cool-btn span {
position: relative;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
}
.my-super-cool-btn span:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
border-radius: 100%;
border: 7px solid #f3cf14;
box-sizing: border-box;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
box-shadow: 0 30px 85px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn:hover span:before {
transform: scale(0.8);
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14), 0 15px 35px rgba(0, 0, 0, 0.14);
}
.my-super-cool-btn .dots-container {
opacity: 0;
animation: intro 1.6s;
animation-fill-mode: forwards;
}
.my-super-cool-btn .dot {
width: 8px;
height: 8px;
display: block;
background-color: #f3cf14;
border-radius: 100%;
position: absolute;
transition: all 0.85s cubic-bezier(0.25, 1, 0.33, 1);
}
.my-super-cool-btn .dot:nth-child(1) {
top: 50px;
left: 50px;
transform: rotate(-140deg);
animation: swag1-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(2) {
top: 50px;
right: 50px;
transform: rotate(140deg);
animation: swag2-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(3) {
bottom: 50px;
left: 50px;
transform: rotate(140deg);
animation: swag3-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn .dot:nth-child(4) {
bottom: 50px;
right: 50px;
transform: rotate(-140deg);
animation: swag4-out 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.my-super-cool-btn:hover .dot:nth-child(1) {
animation: swag1 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(2) {
animation: swag2 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(3) {
animation: swag3 0.3s;
animation-fill-mode: forwards;
}
.my-super-cool-btn:hover .dot:nth-child(4) {
animation: swag4 0.3s;
animation-fill-mode: forwards;
}
#keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes swag1 {
0% {
top: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag1-out {
0% {
top: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag2 {
0% {
top: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag2-out {
0% {
top: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
top: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag3 {
0% {
bottom: 50px;
left: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
left: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag3-out {
0% {
bottom: 20px;
left: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
left: 50px;
width: 8px;
opacity: 0;
}
}
#keyframes swag4 {
0% {
bottom: 50px;
right: 50px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 20px;
right: 20px;
width: 8px;
opacity: 1;
}
}
#keyframes swag4-out {
0% {
bottom: 20px;
right: 20px;
width: 8px;
}
50% {
width: 30px;
opacity: 1;
}
100% {
bottom: 50px;
right: 50px;
width: 8px;
opacity: 0;
}
}
<h3 class="title">Text</h3>
<div id="wrapper">
<a href="#" class="my-super-cool-btn">
<div class="dots-container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<span>Go!</span>
</a>
</div>
I've just recently started working on a company's Joomla page. Because I'm so new at this they will not give me super administrator privileges so I cannot add JS nor add extensions which would solve my issue a lot quicker.
Anyway, I've been requested to make an automatic scrolling banner with controls (play/pause, previous, next).
I've found a couple of CSS only banners but they don't all seem have the same options.
I'm currently using this one:
http://codepen.io/Eliteware/full/BoBgqV/
<head>
<style>
/* Reset */
*{margin:0;padding:0;}
/* Slider */
#slider{
width:100%;
height:360px;
position:relative;
overflow:hidden;
}
#keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:100%;
}
/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid rgba(52, 73, 94, .7);
border-bottom:0;
position:absolute;
bottom:0;
}
/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Intro;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:Quicksand;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}
/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#14b0d3
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}
/* Animation */
#-webkit-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#-moz-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
#-webkit-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#-moz-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
#-webkit-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
#-moz-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
#keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
</style>
</head>
<body>
<div class="i-contenedor">
<div style="width:1024px;height:auto;max-width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">
<div id="slider">
<div class="slides">
<!-- First slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080255.png">
</div>
</div>
<!-- Second slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080905.png">
</div>
</div>
<!-- Third slide -->
<div class="slider">
<div class="images">
<img src="images/banner_03080924.png">
</div>
</div>
<!-- Fourth slide -->
<div class="slider">
<div class="images">
<img src="images/ach_comunicacion_feb_27.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
It works perfectly and has automatic reproduction of the slides like I wanted vía keyframes. I managed to change the size to suit my needs.
Now I need to add the controls but I'm stuck because I can barely understand some of the things that are being done with this CSS.
Now, here is another option: http://qnimate.com/creating-a-slider-using-html-and-css-only/. A much simpler code that has a way for me to choose which slide I want. But no automatic reproduction nor a way to pause.
<!doctype html>
<html>
<head>
<title>QNimate Slider</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-holder">
</div>
</div>
</body>
</html>
And the CSS
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
I mostly want to learn how to join certain elements to create a simple CSS and HTML only image slider because I've been searching forever and I never get exactly what I need.
I know the basic structure and elements of the image slider.
Slider container
slide
image
Arrows the slide I'm on
dots that control the slide I'm on
Pause/play button which pauses or plays the slide I'm on
I'm very humbled by this right now. I'm trying to add this Skype styled preloader into this theme I'm making, but I have no idea how to call the function. I feel as if it needs Javascript, but it's not on the site. Please & Thank you for future reference
<!-- HTML FILES -->
<div class="table">
<div class="table--cell">
<div class="loader">
<span class="loader--ball loader--ball__first"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
<span class="loader--ball"></span>
</div>
</div>
</div>
<!-- CSS FILE -->
html body{
background-color:#2980b9;
width:100%;
height:100vh;
}
.table{
width:100%;
height:100%;
display:table;
.table--cell{
display:table-cell;
vertical-align:middle;
text-align:center;
}
}
.loader{
display:inline-block;
width:120px;
height:120px;
.loader--ball{
position:absolute;
left:0;
right:0;
margin:0 auto;
width:10px;
height:10px;
border-radius:50%;
background:#ecf0f1;
transform-origin:0 60px;
display:block;
animation: 2s rotate cubic-bezier(0.775, 0.030, 0.350, 1.000) infinite;
#for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay:(0.1s * $i);
}
}
}
}
#keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader--ball:first-child{
background:none;
}
.loader--ball__first:before{
content:'';
width:10px;
height:10px;
position:absolute;
z-index:10;
top:0;
bottom:0;
background:#ecf0f1;
display:block;
border-radius:50%;
animation:2s grow cubic-bezier(0.775, 0.035, 0.310, 1.000) infinite;
}
#keyframes grow {
0%,
10% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
50% {
width:10px;
height:10px;
left:-5px;
}
85%, 100% {
width:20px;
height:20px;
top:-2px;
left:-5px;
}
}
The example is using SASS (scss). You need the compiled css if you are not using Sass. Example with compiled CSS
Compiled CSS:
html body {
background-color: #2980b9;
width: 100%;
height: 100vh;
}
.table {
width: 100%;
height: 100%;
display: table;
}
.table .table--cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.loader {
display: inline-block;
width: 120px;
height: 120px;
}
.loader .loader--ball {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ecf0f1;
-webkit-transform-origin: 0 60px;
-ms-transform-origin: 0 60px;
transform-origin: 0 60px;
display: block;
-webkit-animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
animation: 2s rotate cubic-bezier(0.775, 0.03, 0.35, 1) infinite;
}
.loader .loader--ball:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loader .loader--ball:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loader .loader--ball:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loader .loader--ball:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader--ball:first-child {
background: none;
}
.loader--ball__first:before {
content: '';
width: 10px;
height: 10px;
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
background: #ecf0f1;
display: block;
border-radius: 50%;
-webkit-animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
animation: 2s grow cubic-bezier(0.775, 0.035, 0.31, 1) infinite;
}
#-webkit-keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}
#keyframes grow {
0%,
10% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
50% {
width: 10px;
height: 10px;
left: -5px;
}
85%, 100% {
width: 20px;
height: 20px;
top: -2px;
left: -5px;
}
}
I would like to simulate a loading effect, so the opacity of the image is changing gradually.
body {
background-color: #aaa;
padding: 10px;
}
#progressbar {
width: 269px;
height: 269px;
background-color: #eee;
clear: both;
}
#progress {
background: #fff; /*-- Color of the bar --*/
height: 269px;
width: 0%;
max-width: 269px;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
}
#pbaranim {
height: 269px;
width: 269px;
overflow: hidden;
background: url("http://i57.tinypic.com/acyid2.jpg");
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55);
filter: alpha(opacity=55);
}
#-webkit-keyframes progress {
from { }
to { width: 100% }
}
#-moz-keyframes progress {
from { }
to { width: 100% }
}
#-ms-keyframes progress {
from { }
to { width: 100% }
}
#keyframes progress {
from { }
to { width: 100% }
}
<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>
In my example, the Div is over the image.
I need the image opacity to become clearer, so the inverse of what I have
Image should appear from 0 to 100%
Makes sense?
thanks for any help
You can achieve the effect with the following code:
CSS
#progressBar {
position:relative;
}
#progressImg {
width:391px;
}
#opacObj {
-webkit-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-webkit-animation-fill-mode: forwards;
-moz-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-moz-animation-fill-mode: forwards;
-o-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
-o-animation-fill-mode: forwards;
animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96);
animation-fill-mode: forwards;
width:391px;
height:364px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#-webkit-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#-moz-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#-o-keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
#keyframes opacAnimation {
0% {
opacity:0.8;
left:0;
}
100% {
opacity:0.0;
left:391px;
}
}
HTML
<div id="progressbar">
<img src="http://i57.tinypic.com/acyid2.jpg" border="0" id="progressImg">
<div id="opacObj"></div>
</div>
jsFiddle demo
Change the nesting hierarchy of your objects, namedly progress and pbaranim divs, as this
<div id="progressbar"><div id="pbaranim"><div id="progress" ></div></div></div>
You will progress from there on, by adding another image with the from color, and keep current image as the to color (from and to colors of animation) etc...
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!