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!
Related
I have sample code on codepen here
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .8);
z-index:100;
}
.green{
width:100px;
height:100px;
background-color:green;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: 1;
}
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
There are 2 rectangles - one red and one green.
Green can be anywhere on the screen.
What I'm trying to create is zoom-in animation from position of green rectangle to the final position of red rectangle. I'm trying somehow to get starting position relative to green rectangle, but cannot do it since .parent element is also fixed in position.
Currently red element has zoom-in effect but initial position is left:0 top:0 which is position of .parent and not .green.
Is there any workaround for this?
May be this can help you. (Read this other stackoverflow answer)
$(document).ready(function() {
setTimeout( function(){
$('.green').addClass('fixed');
},1000);
$('.green').css('position','fixed');
});
.liel{
position: relative;
}
.parent{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0, 0, 0, .2);
z-index:100;
pointer-events: none;
}
.green {
width:100px;
height:100px;
background-color:green;
transition: all 5s ease-in-out;
}
.zoom{
width:200px;
height:200px;
background-color:red;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
animation: zoomIn 5s;
}
.fixed {
animation: zoomIn 5s;
transform: translate(-50%, -50%);
width:200px;
height:200px;
top:50%;
left:50%;
}
#keyframes zoomIn {
0%{
top:0;
left:0;
width:100px;
height:100px;
opacity: 0;
}
100%{
opacity: .5;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="liel">
<div class="green"></div>
<div class="parent">
<div class="zoom"></div>
</div>
</li>
</ul>
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;
}
}
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 {
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 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;
}