I have the following code which is working fine on Chrome but not on Firefox. I want to know if something is going wrong in my code as the animation is totally different in this two browsers. As on Chrome the animation is smooth and the frames are fading nice. But on Firefox everything seem to be mess as there the animation seem to be cutted off.
#banner img {
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#top {
-moz-animation-name: bannerFadeInOut;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-moz-animation-direction: alternate;
animation-name: bannerFadeInOut;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
HTML
<div id="banner">
<img class="back" id="back" src="frames/frame_1.jpg"/>
<img class="top" id="top" src="frames/frame_2.jpg"/>
<img id="logo1" type="image/svg+xml" src="" />
<div class="border" id="border"></div>
<img id="cta" src="frames/title.png"/>
</div>
Related
I have a sample:
link
CODE HTML:
<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">
CODE CSS:
#keyframes fade-img {
0%{
opacity: 0;
}
100%{
opacity: 0.5;
filter: alpha(opacity=50);
-moz-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
}
}
.img{
animation-name: fade-bg;
animation-iteration-count: infinite;
animation-duration: 2s;
}
I want to repeat this animation after 2 seconds but it does not understand why it does not work.
Can you please tell me what is wrong?
Is it a syntax mistake?
Thank you!
You have a typo. The animation is called .fade-img not .fade-bg. See the code snippet below. A little extra something: you can add animation-direction: alternate; to make the image fade both in and out smoothly.
#keyframes fade-img {
0%{
opacity: 0;
}
100%{
opacity: 0.5;
filter: alpha(opacity=50);
}
}
.img{
max-width: 100%;
animation-name: fade-img;
animation-iteration-count: infinite;
animation-duration: 2s;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
animation-direction: alternate;
}
<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">
`
I'm using keyframes in CSS for the first time.
It didn't work on the 2 browsers I tested (Safari and Chrome) and I learned that all keyframe-related properties need browser prefixes, so I added -webkit- but it still won't work
The purpose is to have the images crossfade every 10 seconds, but I only see Image2 constantly.
Here's the code for the div:
<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>
CSS:
#cf {
position:relative;
width:300px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes cf3FadeInOut {
0% {
-webkit-opacity:1;
}
45% {
-webkit-opacity:1;
}
55% {
-webkit-opacity:0;
}
100% {
-webkit-opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
You have made a mistake calling the animation. the id #cf3 doesn't exist. The rest works fine (but delete the -webkit- for opacity, that css property doesn't need it)
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
FIDDLE
i have this simple web page and what i want to do is to fade in the first pic for 5 seconds then change it to picture # 2 for 5 seconds as well. here is my code:
<!DOCTYPE html>
<html>
<style>
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 30s;
animation-duration: 10s;
animation-direction: alternate;
}
}
</style>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fade.css">
<title>Wideout</title>
</head>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/seMwpP0yeu4"
frameborder="0" allowfullscreen></iframe>
<div id="cf">
<img class="bottom" src="images/1.jpg" height="100" />
<img class="top" src="images/2.jpg" height="100" />
</div>
</body>
</html>
i do believe my problem is with the percentage part. can someon help me out? much appreciated
This can be done just using CSS3
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
Check
Here's a JSFiddle
I want a fadein and fadeout effect in CSS which should not stop (should be continous).
I created one: http://jsfiddle.net/z5UB5/
Code :
CSS:
body { background: #fff; }
#-webkit-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.objblink {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease-in-out;
}
HTML:
<p class="objblink">TEST</p>
But this code is only working in Google Chrome. I want that it should also work in other major browsers.
You can see my modification here jsfiddle, i make your animation definition more short :
-moz-animation: blink 2s ease-in-out infinite normal;
-webkit-animation: blink 2s ease-in-out infinite normal;
animation: blink 2s ease-in-out infinite normal;
Add -moz and #keyframes syntax and removed single quotes from blink.
You can see shorthand syntax of animation at Mozilla Dev Network
If you're open to a jQuery solution, this should do the trick for you:
$(document).ready(function(){
shown = true;
setInterval(function(){
if(shown == true)
$(".objblink").fadeOut();
else
$(".objblink").fadeIn();
shown = !shown;
},500);
});
Here is the JSFiddle
As your latest fiddle, you have declare the animation name with single quote. Remove that one and it will work.
Instead of this
#-moz-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
Use this
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
DEMO
CSS:
.objblink{
-webkit-animation: myfirst 3s;
animation:myfirst 3s;
}
#keyframes myfirst {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>
So i have 3 images i want to animate using the css property, i seem to have two images working fine but cant see how to animate the third image in.
The images should animate as follows
class="top" first for 1.5 seconds
class="middle" second for 1.5 seconds
class="bottom" third for 1.5 seconds
only one image should be visible at one time.
Here is the fiddle link: http://jsfiddle.net/sEd9r/
and here is the code;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Untitled Document</title>
</head>
<body>
<div id="cf3" class="shadow">
<img class="bottom" src="http://dl.dropbox.com/u/21893804/s1.jpg" />
<img class="middle" src="http://dl.dropbox.com/u/21893804/s2.jpg" />
<img class="top" src="http://dl.dropbox.com/u/21893804/s3.jpg" />
</div>
</body>
</html>
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
#cf3 {
position:relative;
height:60px;
width:480px;
margin:0 auto;
}
#cf3 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf3 img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1.5s;
-webkit-animation-direction: normal;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1.5s;
-moz-animation-direction: normal;
animation-delay:3s;
-webkit-animation-delay:3s; /*Safari and Chrome */
}
#cf3 img.middle {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1.5s;
-webkit-animation-direction: normal;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1.5s;
-moz-animation-direction: normal;
animation-delay:1.5s;
-webkit-animation-delay:1.5s; /*Safari and Chrome */
}
I think that you need to make the animate fade from 0 to 1 so that for 1/3 of the time it's at 0. You then stagger them using delay so that only one has the 1 value at once.
I'll try and work it out at some point!