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!
Related
I'm trying to get animation timing but it is not working. I have HTML code using bootstrap below and CSS code in relation.
What I want to do is set the background image to do the transition animation for a duration of 1.5s and the text that goes over it for a duration of 2.5s. But I realized that editing the css for "introB" would effect the whole jumbotron section, making the timing for both exactly the same.
I was wondering if anyone would know how to separate the background image with the text so that I can do two different animations for them.
HTML code
<section class="jumbotron" id="introB">
<div class="container">
<div id="introduction" class="slideUp">
<h2 class="col-sm-9">I'm a Developer, Designer and Amateur Photographer living in Canada Ottawa.</h2>
</div>
</div>
</section>
CSS code
#introB{
background-image: url(../images/home.jpg);
background-size: cover;
height: 800px;
position: relative;
animation-name: slideUp;
-webkit-animation-name: slideUp;
-ms-animation-name: slideUp;
-o-animation-name: slideUp;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
visibility: visible !important;
}
#introduction h2{
font-size: 70px;
color: white;
}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
-ms-animation-name: slideUp;
-o-animation-name: slideUp;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
-ms-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-o-animation-timing-function: ease;
visibility: visible !important;
}
Thanks for the help in advance!
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>
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 a simply css animation running on my website which should simply fade in various sections of my webpage at different times. Unfortunately, this aspect of my page works only in chrome and Safari, but not in Firefox and IE.
After doing a little research, I included unit values for the fade timeframes, but this resulted in no improvement. Here is the following css:
a {
text-decoration: none; color: #FFFFFF; position: relative;
transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
}
/*Animations*/
#-webkit-keyframes FADEY {
0% { opacity: 0; }
100% { opacity: 1; }
}
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
[role="article"] {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
.design-selection, .design-archives {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
Any advice would be greatly appreciated.
Thanks,
choltz
You currently have the Webkit's vendor prefix for for animation, -webkit. This is why it only works in Webkit-based browsers such as Chrome and Safari. For older versions of Firefox, you need to add -moz- as well. Current Firefox and current Internet Explorer just use the real version, animation with no prefix.
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-moz-animation-name: FADEY;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
animation-name: FADEY;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
You can also write out the CSS shorthand, to minimize the lines of code:
-webkit-animation:FADEY 1s 1 ease-in-out;
-moz-animation:FADEY 1s 1 ease-in-out;
animation:FADEY 1s 1 ease-in-out;
I'm a developer with not much CSS experience. I want to create a pure CSS3 slideshow using two images. I found some nifty code for doing so, and I've implemented a very slight variation below (basically I just took out the #cf3 id selector for img .top):
.slide {
position:absolute;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
The first image is defined as <img class="slideshow top" src="img1.jpg">. The second is the same except without the "top" class.
When I load the page, all of my other CSS works, but the animation is nowhere to be found. Anyone see where I went wrong?
You need to add vendor specific property names, CSS3 animation is still a draft spec.
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;
-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
/* and all the keyframes too */
#-webkit-keyframes cf3FadeInOut { ... }
#-moz-keyframes cf3FadeInOut { ... }
#-o-keyframes cf3FadeInOut { ... }
#keyframes cf3FadeInOut { ... }