I am using pseudo class along with keyframes for the sliding animation of the images but I am not able to render the animation on the browser. Please help me to debug this code. Thanks in advance :).
<html>
<style>
#fullimage > li:target {
animation: slideImage 50s linear;
-webkit-animation: slideImage 50s linear;
-moz-animation: slideImage 50s linear;
}
#keyframes slideImage {
from { left: -700px; }
to { left: 0px; }
}
#-webkit-keyframes slideImage {
from {left: -700px; }
to { left: 0px; }
}
#-moz-keyframes slideImage {
from {left: -700px; }
to { left: 0px; }
}
</style>
<body>
<div id="wrapper">
<ul id="fullimage">
<li id="a">
<img src ="a.jpg" />
</li>
<li id="b">
<img src ="images/b.jpg" />
</li>
<li id="c">
<img src ="c.jpg" />
</li>
</ul>
<ul id="thumbimage">
<li>
<a href="#a">
First one
</a>
</li>
<li>
<a href="#b">
Second one
</a>
</li>
<li>
<a href="#c">
Third one
</a>
</li>
</ul>
</div>
</body>
</html>
Your animation and keyframes code looks fine, but you need to set the position property to have left to work.
#fullimage > li:target {
position: relative;
}
jsfiddle
Related
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 4 years ago.
I tried to figure out this issue. How do I stop the progress bar after the animation ends?
ul li {list-style:none;}
li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}
.skillsBar ul li .bar{
animation: Ani linear 7s 1 normal;background-color:#f00;height: 100%; position: absolute; top:0;
}
.skillsContWrpa .skillsBar ul li .bar{
animation-name:Ani;
animation-duration: 7s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-direction: alternate;
animation-fill-mode: both;
}
#keyframes Ani {
0% { width:0%; }
100% { width:90%; }
}
<div class="skillsBar">
<ul>
<li><span>PHOTOSHOP 90%</span>
<div class="bar"></div>
</li>
<li><span>HTML CSS 80%</span></li>
<li><span>DEVELOPMENT 70%</span></li>
<li><span>MARKETING 80%</span></li>
</ul>
</div>
add "animation-fill-mode: forwards;" to your css class ".bar"
forward -> The element will retain the style
ul li {list-style:none;}
li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}
.bar{
background-color:#f00;
height: 100%;
position: absolute;
top:0;
animation: Ani linear 7s normal;
animation-fill-mode: forwards;
}
#keyframes Ani {
0% { width:0%; }
100% { width:90%; }
}
<div class="skillsBar">
<ul>
<li>
<span>PHOTOSHOP 90%</span>
<div class="bar"></div>
</li>
<li><span>HTML CSS 80%</span></li>
<li><span>DEVELOPMENT 70%</span></li>
<li><span>MARKETING 80%</span></li>
</ul>
</div>
values that is set by the last keyframe.
I think this is what you are looking for: Solution to your question - Codepen link
You have to use this basic structure:
<div class="skillbar clearfix javascript" data-percent="80%">
<h4 class="skillbar-title"><span>Development</span></h4>
<div class="skillbar-bar"></div>
<div class="skill-bar-percent">80%</div>
</div>
Inside data-percent="" you can put any percentage and animation will work accordingly.
I have a div that is acting as a navigation bar for my webpage. The div consists of a horizontal unordered list where each list item is an image. The unordered list has a fade-in animation on load, and each list item has a hover effect where it grows in scale upon mouseover.
For some reason, whenever I load the page, either in Dreamweaver's live view screen or as a preview on the web browser, the div starts a few pixels off the position to the right, and once the fade-in animation is completed, it 'twitches' back to its proper position.
Its very frustrating because this is not complicated code. I only have the Source Code page and its CSS stylesheet loaded in the project.
This is all the HTML code related to the Navigation bar:
<div class="Nav">
<ul>
<li>
<img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/>
</li>
<li>
<img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/>
</li>
<li id="josh">
<img src="img/joshforsite.png" width="300px" height="300px" alt="About Me"><br/>
</li>
<li>
<img src="icons/designicon.png" width="120px" height="120px" alt="Design"><br/>
</li>
<li>
<img src="icons/brandicon.png" width="120px" height="120px" alt="Branding"><br/>
</li>
</ul>
</div>
...and this is all the CSS code related to the Navigation bar:
.Nav {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
position: absolute;
width: 100%;
padding-top: 16%;
white-space: nowrap;
.Nav li {
vertical-align: middle;
display: inline-block;
padding-right: 4%;
opacity: 1;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
transition: all .3s ease-in-out;
.Nav li:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
#keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
#-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
Again, I am a beginner at HTML & CSS so I don't how much of a mess the coding is.
Here is a link to a YouTube video I uploaded showing the problem. It also shows towards the end a second issue I'm having whereby the growing hover effect is bugged. Any help with this would be appreciated.
Thank you!
Change the padding-right on .Nav li to a px based solution instead of a percentage and it should eliminate that jump left.
Also, you're missing your closing curly brackets for each block.
You are using images with alternative text. The glitching is probably caused by loading the images. Try to preload the images with javascript and it might help.
It's possible using nth-type add delay for each image in a list?
in my example I want that each image appears with a different delay, by example, the 1st appears with a .5 delay, the 2nd 1s and so on in each group of 4 images.
Example in this codepen: http://codepen.io/gpincheiraa/pen/eJeEmb
EDIT:
More detailed description that i want to do
Iteration 1:
|-- first image of Li moff-1 delayed 0.5|-- first image of Li moff-2 delayed 1s --| ...
Iteration 2:
|-- second image of Li moff-1 delayed 0.5|-- second image of Li moff-2 delayed 1s --| ...
Iteration 3:
|-- third image of Li moff-1 delayed 0.5|-- third image of Li moff-2 delayed 1s --| ...
and so on ...
HTML
<ul class="services-images">
<li class="moff-1">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-03.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-11.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-07.jpg">
</li>
<li class="moff-2">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-12.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-02.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-08.jpg">
</li>
<li class="moff-3">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-01.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-10.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-06.jpg">
</li>
<li class="moff-4">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-05.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-09.jpg">
<img src="http://estudiodelacruz.cl/insitu/insitu/images/making-off-04.jpg">
</li>
</ul>
CSS
.services-images, .contact-images {
position: relative;
display: flex;
min-height: 200px;
}
.services-images img{
position: absolute;
top:0;
left:0;
padding: 0 10px;
}
.services-images li{
width: 25%;
position: relative;
}
.services-images img:nth-of-type(1){
-webkit-animation: fadeInOut 9s linear 9s infinite;
}
.services-images img:nth-of-type(2){
-webkit-animation: fadeInOut 9s linear 6s infinite;
}
.services-images img:nth-of-type(3){
-webkit-animation: fadeInOut 9s linear 3s infinite;
}
.services-images img:nth-of-type(4){
-webkit-animation: fadeInOut 9s linear infinite;
}
#-webkit-keyframes fadeInOut{
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
I tried to make one button fade in then the other follow up. Is there any way that i can achieve wat i trying to do?
if there is way or any article, please help me know how to make one by one button animate at a time when window load?
HTML
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
<li class="li">
<a href="">
<img class="image" src="http://templateafiq1.site88.net/button/about%20me.png">
</a></li>
</center>
</ul>
</font>
CSS
div header{
width:100%;
height:50px;
top:50px;
position:fixed;}
header .image{
height:110px;
width:110px;
opacity:0;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 2s;
-o-animation: fadein 2s;
animation-timing-function:linear;
animation-fill-mode:forwards;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:1s;
-webkit-animation-fill-mode: forwards;}
#header .ul{
list-style-type: none;
position:fixed;
top:17px;
width:100%;}
header .li {
height:110px;
width:110px;
padding:1px;
display:inline;
z-index:1;}
#header .li a{
text-decoration:none;
height:110px;
width:110px;}
//Fade in effect
#keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-moz-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-webkit-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
#-o-keyframes fadein {
0% {opacity:0;}
100% {opacity:1;}}
Javascript
$(window).load(function() {
$("#header.image").fadeIn("fast");});
here the demo : http://jsfiddle.net/pkjfgfpf/
Sorry for the bad english, english is not my native language.
Thank you so much for your help.
The second argument to the fadeIn function is a function to call once the animation is complete. You can use this to chain animations to only happen after a previous animation is complete. See the fadeIn documentation for details.
HTML:
<img class="image" id="img1" src="imageUrl.filetype" />
<img class="image" id="img2" src="imageUrl.filetype" />
<img class="image" id="img3" src="imageUrl.filetype" />
JQuery:
$("#img1").fadeIn("slow", function() {
$("#img2").fadeIn("slow", function() {
$("#img3").fadeIn("slow");
});
});
CSS:
.image {
display: none;
}
Example JSFiddle (with all non-relevant parts removed)
Probably this could be your solution, Adjust it in your code (see the example here http://jsfiddle.net/nepal12/8jjooaox/)
// HTML
<div id="images">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
</div>
// Css
div#images { font-size: 0; background: #000; }
div#images img { width: 50%; height: auto;
opacity: 0; transition: .8s opacity; }
div#images img.visible { opacity: 1; }
// Javascript
<script>
var images = document.querySelectorAll("#images img"), i = 1;
Array.prototype.forEach.call(images, function(images) {
setTimeout(function(){ images.classList.add("visible") }, 700*i)
i++;
})
</script>
Change this:
$('#header.image').fadeIn('fast');
To:
$('.image').each(function(index,domEle){
setTimeout(function ( ) {
if(domEle.style.webkitAnimationPlayState!=undefined && domEle.style.webkitAnimationPlayState != null)
{
domEle.style.webkitAnimationPlayState = 'running'
}
if(domEle.style.mozAnimationPlayState!=undefined && domEle.style.mozAnimationPlayState != null)
{
domEle.style.mozAnimationPlayState = 'running'
}
if(domEle.style.oAnimationPlayState!=undefined && domEle.style.oAnimationPlayState != null)
{
domEle.style.oAnimationPlayState = 'running'
}
if(domEle.style.msAnimationPlayState!=undefined && domEle.style.msAnimationPlayState != null)
{
domEle.style.msAnimationPlayState = 'running'
}
if(domEle.style.animationPlayState!=undefined && domEle.style.animationPlayState != null)
{
domEle.style.animationPlayState = 'running'
}
},index*2000);
});
At your CSS styles simply add the following:
header .image{
animation-play-state:paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
-o-animation-play-state: paused;
}
sample Fiddle http://jsfiddle.net/pkjfgfpf/
This is a simple website for a school project. I've had trouble with the CSS animation for an image slider at the home page. It refuses to animate, and checking with browser website inspectors show that the rule is not being "computed" (applied?) to the image.
Here is the code for the page:
<!DOCTYPE html>
<head>
<title>Foo Bar Lorem Ipsum IS-3 | Home</title>
<link rel="stylesheet" href="stylesheets\home.css">
</head>
<body>
<div id="wrapper">
<header>
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</div>
<img src="images\header.png">
<header>
<div class="slider">
<ul>
<li><img src="images\law1.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\law2.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\law3.JPG" width="900" height="675" title="SLC Law
Workshop"/> </li>
<li><img src="images\blood1.JPG" width="900" height="675" title="SLC Blood
Drive "/> </li>
<li><img src="images\blood2.JPG" width="900" height="675" title="SLC Blood
Drive"/> </li>
<li><img src="images\blood3.JPG" width="900" height="675" title="SLC Blood
Drive"/> </li>
<li><img src="images\interview1.JPG" width="900" height="675" title="SLC
Interview"/> </li>
<li><img src="images\interview3.JPG" width="900" height="675" title="SLC
Interview"/> </li>
<li><img src="images\interview4.JPG" width="900" height="675" title="SLC
Interview"/> </li>
</ul>
</div>
</header>
<div id="main">
<h1>
Welcome to the Foo Website
</h1>
<hr />
<p>
Welcome to the Foo
</p>
<p>
Lorem Ipsum
</p>
<p>
Hello World
</p>
</div>
</body>
</html>
And for the CSS:
body
{
background-image:url("../images/bg.png");
}
#font-face
{
font-family: Interstate;
src:url("../fonts/Interstate.ttf");
}
#wrapper
{
position:relative;
margin:auto;
width:900px;
background-color:#fcfcfc;
}
#wrapper header img
{
display:block;
margin-left:auto;
margin-right:auto;
}
#navbar
{
position:fixed;
}
#navbar ul
{
list-style-type:none;
margin:0;
padding:0;
}
#navbar li
{
display:inline;
float:left;
}
#navbar a
{
display:block;
width:225px;
font-family:Interstate, Segoe UI, sans-serif;
text-align:center;
}
#navbar a:hover
{
}
#main
{
margin-left:auto;
margin-right:auto;
padding:0;
}
#main h1
{
font-family:Interstate, Segoe UI;
text-align:center;
color:#6f273d;
}
#main p
{
font-family:Interstate, Segoe UI, sans-serif;
text-align:justify;
margin-left:8px;
margin-right:8px;
}
#main hr
{
color:#6f273d;
background-color:#6f273d;
}
header .slider
{
overflow:hidden;
}
header .slider ul
{
width:8100px;
margin:0;
padding:0;
position:auto;
cursor:arrow;
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
}
header .slider ul:hover
{
animation-play-state:paused;
}
header .slider ul li
{
list-style:none;
float:left;
margin:0;
position:relative
}
#keyframes "slide"
{
0%
{
left:0;
}
11%
{
left:-900px;
}
22%
{
left:-1800px;
}
33%
{
left:-2700px;
}
44%
{
left:-3600px;
}
55%
{
left:-4500px;
}
66%
{
left:-5400px;
}
77%
{
left:-6300px;
}
88%
{
left:-7200px;
}
100%
{
left:0;
}
}
I ran through the whole CSS and HTML file through W3s CSS and HTML validator, but no dice. They don't show any errors. Can anyone help with this?
You need to add -webkit-animation in order for it to work on chrome and safari.
You need the browser specific prefixes:
/*all those who support it*/
#keyframes /*....*/
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
/*Chrome and Safari*/
#-webkit-keyframes /*....*/
-webkit-animation: slide 15s;
-webkit-animation-duration:15s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-out;
/*Firefox*/
#-moz-keyframes /*....*/
-moz-animation: slide 15s;
-moz-animation-duration:15s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-out;
/*Opera*/
#-o-keyframes /*....*/
-o-animation: slide 15s;
-o-animation-duration:15s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:ease-out;
You can use a tool like compass ( http://compass-style.org/ ) that writes all those vendor specific css rules automatically, you just write:
#include transition();
Also, this will not work in any browser on earth, refer to the caniuse table: http://caniuse.com/#search=animation
In addition to adding browser prefixes, you need remove the quotes around your animation's name. Note the latest versions of Firefox no longer require the -moz- prefix, but you may want to add it any way for those that haven't updated in a long time.
#keyframes "slide"
{ ...
Should be:
#keyframes slide
{ ...
You can also save a little time by using the animation shorthand property.
animation: slide 15s;
animation-duration:15s;
animation-iteration-count:infinite;
animation-timing-function:ease-out;
Could be:
animation: slide 15s infinite ease-out;
See the MDN documentation for CSS animations for further information.