Why is firefox showing me the slideshow, but chrome isn't? - html

any idea why this slideshow does work in Firefox, but not in Chrome?(Haven't tested in IE) Hope someone can help!
CSS:
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
HTML:
<div id="slideshow">
<img class='photo' src="Images/Red.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
<img class='photo' src="Images/White.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
</div>

Chrome is lagging behind a bit with this particular one - not sure why, really.
As shown on caniuse, Chrome requires the -webkit- prefix on all animation-related properties, as well as #-webkit-keyframes.
Add these, and it should all work fine. It's kind of annoying to have to duplicate everything just for Chrome, but oh well...

#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
-webkit-animation:round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
#-webkit-keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Chrome uses different syntex:
#-webkit-keyframes
-webkit-animation
-webkit-animation-delay

Related

How do I implement this snowfall code within an email?

I found this code at http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/ and liked the effect. Though when I put it into my email it creates a huge white space between the tables.
How do I insert this into an email correctly? Do I need to place the div tags in a certain place?
<style>
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.animcontainer{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background-color:#007FFF;
}
.snow{
border-radius:9px;
height:18px;
width:18px;
position:absolute;
top:-20px;
background-color:#ffffff;
}
.snow1{
-webkit-animation: snowanim1 5s linear 0s infinite;
}
.snow2{
-webkit-animation: snowanim2 6s linear 1s infinite;
}
.snow3{
-webkit-animation: snowanim3 7s linear 2s infinite;
}
#-webkit-keyframes snowanim1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
#-webkit-keyframes snowanim2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
#-webkit-keyframes snowanim3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
.
<div class="animcontainer">
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
I figured it out in the end, it makes no difference where the div tags are. What was causing the issues was the animcontainer.
There is one issue I could not solve however and that was the animation not reaching the bottom of the page despite being "top:100%" within the animation, so I had to do 2000% to actually reach the bottom which does not look like an elegant solution.

Links in css slideshow

I would like to have the images in my slideshow to be clickable links, but just putting tags around it doesn't work:
<img class='photo' src="Images/Red.jpeg" alt="">
It probably has something to do with the animation, is there a way around this?
Css:
#slideshow {
margin:50px auto;
width:60em;
height:18em;
overflow:hidden;
border:0.4em solid;
border-color: black;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
-webkit-animation: round 16s infinite;
opacity:0;
}
#keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
#-webkit-keyframes round {
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}
HTML:
<div id="slideshow">
<img class='photo' src="Images/Red.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
<img class='photo' src="Images/White.jpeg" alt="">
<img class='photo' src="Images/rose.jpeg" alt="">
</div>
Wrap images with a and add class photo to a links. Remove class photo from images. Try that :)
Try:
Wrap all images in <a> tags, each one with a "photolink" class or any name you want.
#slideshow a.photolink { display: block; }
Try changing "position: absolute" in .photo to "position: relative".

Can i make css animation one at a time when window load?

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/

Animation delay property to change content at fixed intervals

I am trying to animate two pictures so that they change at fixed intervals but the problem is that the second image appears quickly and fades I need a way to make the delay property to repeat i have refereed this but that doesn't seem to work CSS animation delay in repeating
http://jsfiddle.net/fc3nb5rL/2/
I think my problem is somewhere here
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
First fix your HTML(markup), then you can animate the opacity and not the z-index
.container {
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img {
position:absolute;
width:100%;
}
#-webkit-keyframes anim1 {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes anim2 {
from {
opacity:1;
}
to {
opacity:0;
}
}
[href=first] img {
opacity:0;
/*animation----:----name--duration--delay--timing function---direction----iteration count*/
-webkit-animation: anim1 2s 0s linear alternate infinite;
}
[href=second] img {
opacity:1;
-webkit-animation: anim2 2s 0s linear alternate infinite;
}
<div class="container">
<a href="second">
<img src="http://placekitten.com/300/300" />
</a>
<a href="first">
<img class="front" src="http://placekitten.com/300/301" />
</a>
</div>
Give this a shot. I have also set it up to be cross-browser compatible. http://jsfiddle.net/fc3nb5rL/2/
A few things to note about CSS3 transitions. It does not know how to interpolate between the z-index
property, as well as the display property.

Image positioning seems strange

When I insert an image into my HTML it gets positioned in the lower left corner for some reason. Even if I set position to center; it stays in that strange position. What could be causing this?
My code:
<!DOCTYPE HTML>
<html>
<header>
<title>Animation Verkefni</title>
<link type="text/css" href="stylesheet2.css" rel="stylesheet"/>
</header>
<body>
<div class="doge1">
<p>
Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
</p>
</div>
<div class="doge2">
<img src="spengbab.jpg">
</div>
</body>
</html>
css:
body {
background-color:gray;
}
p {
font-size:50px;
margin-left:500px;
margin-right:500px;
text-align:center;
margin-top:250px;
font-family:impact;
}
#keyframes myfirst
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
#-webkit-keyframes myfirst /* Safari og Chrome */
{
0% {opacity:1;}
25% {opacity:2;}
50% {opacity:3;}
75% {opacity:4;}
100% {opacity:10;}
}
.doge2 {
position:fixed center;
top:20px;
}
.doge1:hover
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari og Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Thanks!
Try using position:fixed; & text-align:center;
Like this:
.doge2 {
position:fixed;
top:20px;
width:100%;
text-align:center;
}
Try with
vertical-align:middle;
to keep image at center position.