This question already has an answer here:
Crossfade two images repeatedly after showing for 10 seconds
(1 answer)
Closed 5 years ago.
I want to make two images fade smoothly between them.
Images appear on browser, but animation does not work.
I think this issue is related to #keyframes or #cf3 img.top sections... The other sections seems to work.. Tested on chrome.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cf">
<img class="bottom" src="assets/1.png" />
<img class="top" src="assets/2.png" />
</div>
</body>
</html>
style.css, this is where the fading animation is at:
#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;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Your code is fine you are selecting the wrong id.
Your code:
#cf3 img.top {
Should be
#cf img.top {
The keyframes can be above or below the selector both will work.
Example
Related
I am trying to add animation to 4 images using css. Basically the animation is a transition where each image is displayed for a specific amount of time and then gets changed to the next image. The problem however is, it does not transit to the other image, it only stays in the first image.
Below is my index.html file code
<html>
<head>
<title>My Test Animation</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src = "Scripts/aquaticcenter.js"></script>
<link rel="stylesheet" href="CSS/transitions.css">
</head>
<body>
<h2>My Test Animation</h2>
<div id="cf3">
<img id="cf3" src="/images/test1.jpg" />
<img id="cf3" src="/images/test2.jpg" />
<img id="cf3" src="/images/test3.jpg" />
</div>
</body>
</html>
Below is my css code in separate file (transitions.css)
#cf3 {
position:relative;
height:281px;
width:450px;
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;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf3 img:nth-of-type(1) {
animation-delay: 6s;
}
#cf3 img:nth-of-type(2) {
animation-delay: 4s;
}
#cf3 img:nth-of-type(3) {
animation-delay: 5s;
}
#cf3 img:nth-of-type(4) {
animation-delay: 5s;
}
Im trying to do a crossfade between 3 images, using css.
Im new to #keyframes, so im having trouble to make it work.
Below, is the html and css code snippets:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cf">
<img class="bottom" src="assets/1.png" />
<img class="top" src="assets/2.png" />
<img class="bottom" src="assets/3.png">
</div>
</body>
</html>
style.css:
#cf {
position: relative;
height: auto;
width: auto;
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;
}
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate;
}
#cf img:nth-of-type(1) {
animation-delay: 4s;
}
#cf img:nth-of-type(2) {
animation-delay: 2s;
}
#cf img:nth-of-type(3) {
animation-delay: 0;
}
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Right now, animation is acting weird, flashing from one image to another, at random animation times.
You are close to the correct solution. animation-direction: alternate; causes the animation to "run backwards" once it reached 100%. With the odd times defined in your keyframe, this leads to uneven transitions:
keyframe 0% 17% 25% 92% 100% 92% 25% 17% 0% 17% ... infinite
state :1 1 0 0 1 0 0 1 1 1
time in state : 17% 62% 0% 62% 34%
transition time: 8% 8% 8% 8%
Simplify the keyframe to even times and you should be fine. With an even time distribution you don't even need the animation-direction at all. You can easily adjust the times by changing animation-duration of the keyframe and animation-delay for your images.
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
/* if you only want to cycle a finite amount of times,
simply change 'infinite' with # of iterations you need */
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate; /* not strictly necessary */
position:absolute;
}
#cf img:nth-of-type(1) {
animation-delay: 5s;
}
#cf img:nth-of-type(2) {
animation-delay: 3s;
}
#cf img:nth-of-type(3) {
/* add some delay for the first picture as well */
animation-delay: 1s;
}
#keyframes cf3FadeInOut {
/* distributing times evenly */
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="cf">
<img class="bottom" src="http://lorempixel.com/200/100/sports/1" />
<img class="top" src="http://lorempixel.com/200/100/sports/2" />
<img class="bottom" src="http://lorempixel.com/200/100/sports/3">
</div>
Strictly spoken, the first two transitions are marginally different since they transition to a picture of opacity:1 instead of a fading picture and have slightly different times, but the difference is barely visible and imo not worth the effort compared to the resulting complication in code.
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 want to smoothly scale the div from ratio 0.06 to 1 using css on mouseover.but i m not able to get that effect.
Here is what i have tried
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}
div:hover {
transform:scaleX(0.06);
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
25% {transform:scaleX(0.200);}
50% {transform:scaleX(0.500);}
75% {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>jhk</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
How can i do this?
You didn't really specify how you want to transition everything so here is a basic example:
div {
width: 100px;
height: 100px;
background: red;
transition: all ease-in 2s;
transform:scale(0.06);
}
div:hover {
transform:scale(1);
}
You don't need keyframes for smooth animations. Something simple like that can be accomplished with simple CSS transforms.
Working fiddle: http://jsfiddle.net/mh90y3xv/
try this. You don't need transition when using key frames
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transform:scaleX(0.06);
transform:scaleX(0.06);
}
div:hover {
animation-name: example;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#-webkit-keyframes example {
0% {-webkit-transform:scaleX(0.06);}
100% {-webkit-transform:scaleX(1);}
}
#keyframes example {
0% {transform:scaleX(0.06);}
100% {transform:scaleX(1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>jhk</div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
No need to use #keyframes just use transition.
Here's the JsFiddle link.
HTML
<div>
<div class="animate">
jhk
</div>
</div>
Note: You must add a div with a class animate to maintain the transition.
CSS
div,
.animate {
width: 100px;
height: 100px;
}
.animate {
background: red;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
div:hover > .animate {
-webkit-transform:scaleX(0.06);
-moz-transform:scaleX(0.06);
-o-transform:scaleX(0.06);
transform:scaleX(0.06);
}
In this case, using transition is a lot smoother than animation and #keyframes.
Hope it helps.
I hope you want something like this.
CSS
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all .06s ease-in-out;
-o-transition: all .06s ease-in-out;
transition: all .06s ease-in-out;
}
div:hover {
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#keyframes example {
25% {transform:scaleX(0.200);}
50% {transform:scaleX(0.500);}
75% {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}
Fiddle
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!