CSS3 Left to right transition not working
Question
I'm having a little issue trying to get my images to move from left (-700px) to their centered location (0px) . I'm not 100% sure what I am doing wrong here as the transition is not working itself. I have to maintain the original structure of the HTML (if possible). I applied a different animation on background color and that seems to be working so I think it might be due to margins or something like that. I'm fairly new to CSS animations and I know that this can be done more effectively with jQuery (trust me). If anyone can give any input please let me know or if you need more information please also let me know!
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CS 350 - Lab #5</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<h1 id="title">Image Gallery</h1>
<div id="mygallery">
<ul id="full-image">
<li id="desert">
<img src="./images/desert.jpg" alt="desert"/>
<p><span>Desert</span></p>
</li>
<li id="koala">
<img src="./images/koala.jpg" alt="koala">
<p><span>Koala</span></p>
</li>
<li id="lighthouse">
<img src="./images/lighthouse.jpg" alt="lighthouse">
<p><span>Lighthouse</span></p>
</li>
<li id="penguins">
<img src="./images/penguins.jpeg" alt="penguins">
<p><span>Penguins</span></p>
</li>
</ul>
<ul id="thumb-image">
<li>
<a href="#desert">
<img src="./images/desert.jpg" alt="desert">
</a>
</li>
<li>
<a href="#koala">
<img src="./images/koala.jpg" alt="koala">
</a>
</li>
<li>
<a href="#lighthouse">
<img src="./images/lighthouse.jpg" alt="lighthouse">
</a>
</li>
<li>
<a href="#penguins">
<img src="./images/penguins.jpeg" alt="penguins">
</a>
</li>
</ul>
</div>
</body>
</html>
And the CSS:
body {
background-color: #d9d6cb;
}
#title {
font-family: Agency FB;
text-shadow: 2px 2px #F1F1F1;
text-align: center;
}
#mygallery {
width: 580px;
height: 480px;
margin: auto;
padding: 20px;
background-color: #000000;
}
#full-image {
list-style: none;
width: 580px;
height: 400px;
margin: 0px;
padding: 0px;
overflow: hidden;
position: relative;
}
#full-image img {
width: 580px;
}
:target {
animation: slideImage 2s;
-webkit-animation: slideImage 2s;
-moz-animation: slideImage 2s;
}
#thumb-image {
list-style: none;
overflow: auto;
}
#thumb-image img {
width: 50px;
height: 50px;
float: right;
margin-left: 5px;
border: 1px solid #ffffff;
opacity: 0.5;
}
#thumb-image img:hover {
opacity: 1;
}
#thumb-image li {
position: relative;
}
@-webkit-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@-moz-keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
@keyframes slideImage {
0% {left:-700px;}
100% {left:0px;}
}
Once again, anything helps!
3 answers
solution1
3 ACCPTED 2017-09-29 06:59:23
You should give position: absolute; to the :target if you want to manipulate left property (as it does in your keyframes). Here is the working example:
body { background-color: #d9d6cb; } #title { font-family: Agency FB; text-shadow: 2px 2px #F1F1F1; text-align: center; } #mygallery { width: 580px; height: 480px; margin: auto; padding: 20px; background-color: #000000; } #full-image { list-style: none; width: 580px; height: 400px; margin: 0px; padding: 0px; overflow: hidden; position: relative; } #full-image img { width: 580px; } :target { position: absolute; animation: slideImage 2s; -webkit-animation: slideImage 2s; -moz-animation: slideImage 2s; } #thumb-image { list-style: none; overflow: auto; } #thumb-image img { width: 50px; height: 50px; float: right; margin-left: 5px; border: 1px solid #ffffff; opacity: 0.5; } #thumb-image img:hover { opacity: 1; } #thumb-image li { position: relative; } @-webkit-keyframes slideImage { 0% {left:-700px;} 100% {left:0px;} } @-moz-keyframes slideImage { 0% {left:-700px;} 100% {left:0px;} } @keyframes slideImage { 0% {left:-700px;} 100% {left:0px;} }
<body> <h1 id="title">Image Gallery</h1> <div id="mygallery"> <ul id="full-image"> <li id="desert"> <img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="desert"/> <p><span>Desert</span></p> </li> <li id="koala"> <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="koala"> <p><span>Koala</span></p> </li> <li id="lighthouse"> <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="lighthouse"> <p><span>Lighthouse</span></p> </li> <li id="penguins"> <img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="penguins"> <p><span>Penguins</span></p> </li> </ul> <ul id="thumb-image"> <li> <a href="#desert"> <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="desert"> </a> </li> <li> <a href="#koala"> <img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="koala"> </a> </li> <li> <a href="#lighthouse"> <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="lighthouse"> </a> </li> <li> <a href="#penguins"> <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="penguins"> </a> </li> </ul> </div> </body>
solution2
1 2017-09-29 06:53:55
use !important to override the style. This may work
solution3
1
Well, if the problem would be the margins, try this:
div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}
where the first parameter of the translate() function is the x-offset, and the second the y-offset. If that doesn't work, then you at least know the margins aren't the problem ^^
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.