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.
Related
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
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/
I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/ for banner images such as the very top one.
I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.
here is my html :
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#">
<article class="article_container">
<img class="article_image_hompage5" src="#">
<h2 class="article_title_hompage3"> a favourite thai soup</h2>
</article>
</a>
</div>
</div>
and my css for the image :
.article_image_hompage5{
width: 100%;
border-radius: 2px 2px 2px 2px;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
z-index:0;
}
Can someone help with with finding the right css settings ?
cheers,
Use css animation you can get the similar result.
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
img {
-webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
animation: zoom 50s;
}
<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />
If you want to also zoom out you need to define the the milestones in your keyframes as such:
#-webkit-keyframes zoominout {
0% {
-webkit-transform: scale(1,1);
}
50% {
-webkit-transform: scale(1.5,1.5);
}
100% {
-webkit-transform: scale(1.1,1.1);
}
}
Use css transform:scale();
like:
JavaScript:
window.onload=function(){
$("#content").fadeOut(4000);
$("#background").addClass("zoom");
setTimeout(function(){
$("#background").removeClass("zoom");
},5000);
}
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat;
background-size: 100% 100%;
display:inline-block;
z-index:2;
transition:all ease 4.1s;
/* transform:scale(1,1);*/
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:3;
background-color:rgba(0,0,0,0.5);
color:#ffffff;
font-size:50px;
}
.zoom{
transform:scale(1.2,1.2);
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="background">
</div>
<div id="content">
<center><br /><br /><br /><br /><br /><br />
Watching...
</center>
</div>
I have five buttons in the UI with their respective inner box shadows. I want them to rotate individually when hovered upon. Now when I hover over one even the adjacent button is also rotating accordingly . And also the inner shadow should make a smooth transition inside the buttons ? Why is not that happening? Where am I mistaken?
http://jsfiddle.net/EP3Ps/
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
.mySlider
{
//
}
.shadow_div
{
//
}
.mySlider img
{
width:800px;
height:480px;
display:none;
}
.Parent_Slider > a
{
//
}
.Next_Class
{
//
}
.Prev_Class
{
//
}
ul.Round_Buttons
{
position:relative;
left:40%;
top:5px;
text-decoration:none;
list-style-type:none;
text-indent:-9999px
}
ul.Round_Buttons li
{
float:left;
background-color:#d1bfbf;
margin:1px 5px;
padding:0px 7px;
border-radius:50%;
border-width:1px;
border-style:solid;
cursor:pointer;
box-shadow:inset 1px 1px 1px 1px #f00;
transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
}
ul.Round_Buttons li:hover
{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
}
#-webkit-keyframes rotate
{
from
{
transform : rotate(0deg);
}
to
{
transform :rotate(-360deg);
}
}
#keyframes rotate
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(-360deg);
}
}
</style>
<script type="text/javascript">
//
</script>
</head>
<body>
<div class="Parent_Slider">
<div id="my_image_slider" class="mySlider">
<img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
<img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
<img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
<img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
<img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
</div>
Next
Prev
</div>
<div class="shadow_div" >
<ul class="Round_Buttons">
<li id="1st_Round">1</li>
<li id="2nd_Round">2</li>
<li id="3rd_Round">3</li>
<li id="4th_Round">4</li>
<li id="5th_Round">5</li>
</ul>
</div>
</body>
</html>
You are using keyframes not correctly.
Also, to make shadows changed you should add rule for new shadow on :hover.
It should be something like this:
ul.Round_Buttons li:hover
{
animation:rotate 1s;
-webkit-animation:rotate 1s;
-moz-animation:rotate 1s;
box-shadow:inset 1px 1px 1px 10px #f00;
}
see updated fiddle
On this page, how are the <img> references accomplished in the markup? The style sheet has [src] selectors, but I'm lost (or stupidly uninformed).
How is the CSS letting the HTML know where the image is?
<!doctype html>
<title>Slideshow</title>
<link href=s.css rel=stylesheet>
<ul>
<li><img src=1>
<li><img src=2>
<li><img src=3>
<li><img src=4>
</ul>
#-webkit-keyframes f {
0% { opacity:0; }
12% { opacity:1; -webkit-transform:scale(1.03) }
25% { opacity:1; -webkit-transform:scale(1.06) }
37% { opacity:0; -webkit-transform:scale(1.30) }
100% { opacity:0; } }
#-moz-keyframes f {
0% { opacity:0; }
12% { opacity:1; -moz-transform:scale(1.03) }
25% { opacity:1; -moz-transform:scale(1.06) }
37% { opacity:0; -moz-transform:scale(1.30) }
100% { opacity:0; } }
body { background:#f0f0eb }
ul, [src] { position:absolute }
ul { overflow:hidden;
top:50%;
left:50%;
width:650px;
height:300px;
margin:-200px 0 0 -340px;
padding:0;
list-style:none;
border:15px solid #fff;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
box-shadow:0 1px 2px rgba(0,0,0,.2) }
[src] { opacity:0;
-webkit-animation:f 12s linear infinite; -moz-animation:f 12s linear infinite }
[src="2"] { -webkit-animation-delay:3s; -moz-animation-delay:3s }
[src="3"] { -webkit-animation-delay:6s; -moz-animation-delay:6s }
[src="4"] { -webkit-animation-delay:9s; -moz-animation-delay:9s }
It's quite simply really - they're actually valid URLs, e.g.
<img src=4>
Is a relative link, pointing to:
http://playground.deaxon.com/css/slideshow/4
Or:
The "common style" of how the HTML might be formed is:
<ul>
<li><img src="1"></li>
<li><img src="2"></li>
<li><img src="3"></li>
<li><img src="4"></li>
</ul>
Not:
<ul>
<li><img src=1>
<li><img src=2>
<li><img src=3>
<li><img src=4>
</ul>
I think it's the lack of " marks that's confusing you.
Although, as #Wesley points out, this is also perfectly valid HTML (save for the missing alt tags).