CSS3 fade animation should work but it doesn'tShould I make HTML Anchors with 'name' or 'id'?How do I combine a background-image and CSS3 gradient on the same element?CSS3 gradient background set on body doesn't stretch but instead repeats?How do CSS triangles work?How can I change image with opacity transition in response to an onClick event using CSS3?CSS3 - Image SlideshowCSS3 Slideshow animation IssueHow do I make a pure css auto slider that is responsive? (no JavaScript)CSS Animation: How to find out appropriate time intervals for a full screen background image animation?fade animation on a slider not working (CSS3 and html5 only)
"until mine is on tight" is a idiom?
How to justify getting additional team member when the current team is doing well?
Selection Sort Algorithm (Python)
Why Italian monolingual dictionaries usually take complex/archaic examples from books instead of creating simple examples?
As a team leader is it appropriate to bring in fundraiser candy?
Lost passport which have valid student visa but I make new passport unable paste
Equations with summation ("sum") symbols
Another student has been assigned the same MSc thesis as mine (and already defended)
How to prevent pickpocketing in busy bars?
Why is a road bike faster than a city bike with the same effort? How much faster it can be?
How deep is the liquid in a half-full hemisphere?
How come it seems the best way to make a living is to invest in real estate?
What does it mean by "my days-of-the-week underwear only go to Thursday" in this context?
Is population size a parameter, or sample size a statistic?
How do we know neutrons have no charge?
What would influence an alien race to map their planet in a way other than the traditional map of the Earth
Does variance make sense in a fully immutable language?
is there a relationship between prime numbers and music?
Is the order of words purely based on convention?
How can I find Marin?
How fast can a LN payment be over TOR?
Where's the mandatory argument of sectioning commands
what organs or modifications would be needed to have hairy fish?
Beyond Futuristic Technology for an Alien Warship?
CSS3 fade animation should work but it doesn't
Should I make HTML Anchors with 'name' or 'id'?How do I combine a background-image and CSS3 gradient on the same element?CSS3 gradient background set on body doesn't stretch but instead repeats?How do CSS triangles work?How can I change image with opacity transition in response to an onClick event using CSS3?CSS3 - Image SlideshowCSS3 Slideshow animation IssueHow do I make a pure css auto slider that is responsive? (no JavaScript)CSS Animation: How to find out appropriate time intervals for a full screen background image animation?fade animation on a slider not working (CSS3 and html5 only)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I spent half of the day making research for this problem but there doesn't seem to be solution. I am trying to make "fade" animation on pictures which are changed inside of the slideshow-container. I created fade as a photo container. Here is the HTML code:
The changePic() function is responsible for changing pictures and it works fine but I still cannot acquire fade effect. Do you have any idea what would be wrong in this code?
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>html5 css3
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
add a comment
|
I spent half of the day making research for this problem but there doesn't seem to be solution. I am trying to make "fade" animation on pictures which are changed inside of the slideshow-container. I created fade as a photo container. Here is the HTML code:
The changePic() function is responsible for changing pictures and it works fine but I still cannot acquire fade effect. Do you have any idea what would be wrong in this code?
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>html5 css3
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
Your fade class is applied on the parent<div>. the showSlides(n) function is changing the image source of the<img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.
– Saharsh
Mar 28 at 19:30
add a comment
|
I spent half of the day making research for this problem but there doesn't seem to be solution. I am trying to make "fade" animation on pictures which are changed inside of the slideshow-container. I created fade as a photo container. Here is the HTML code:
The changePic() function is responsible for changing pictures and it works fine but I still cannot acquire fade effect. Do you have any idea what would be wrong in this code?
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>html5 css3
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
I spent half of the day making research for this problem but there doesn't seem to be solution. I am trying to make "fade" animation on pictures which are changed inside of the slideshow-container. I created fade as a photo container. Here is the HTML code:
The changePic() function is responsible for changing pictures and it works fine but I still cannot acquire fade effect. Do you have any idea what would be wrong in this code?
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
.fade
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>html5 css3
html5 css3
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
edited Mar 29 at 4:30
Jared Forth
1,2073 gold badges7 silver badges21 bronze badges
1,2073 gold badges7 silver badges21 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
asked Mar 28 at 19:01
Kotori ItsukaKotori Itsuka
144 bronze badges
144 bronze badges
Your fade class is applied on the parent<div>. the showSlides(n) function is changing the image source of the<img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.
– Saharsh
Mar 28 at 19:30
add a comment
|
Your fade class is applied on the parent<div>. the showSlides(n) function is changing the image source of the<img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.
– Saharsh
Mar 28 at 19:30
Your fade class is applied on the parent
<div>. the showSlides(n) function is changing the image source of the <img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.– Saharsh
Mar 28 at 19:30
Your fade class is applied on the parent
<div>. the showSlides(n) function is changing the image source of the <img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.– Saharsh
Mar 28 at 19:30
add a comment
|
1 Answer
1
active
oldest
votes
You can add animation on image (I have added class on image named 'fadeImage'). And then on click just remove and add same class again.
Also, don't forget to trigger a reflow using the offsetWidth before adding class back.
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
See the Snippet below:
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
add a comment
|
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55405075%2fcss3-fade-animation-should-work-but-it-doesnt%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can add animation on image (I have added class on image named 'fadeImage'). And then on click just remove and add same class again.
Also, don't forget to trigger a reflow using the offsetWidth before adding class back.
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
See the Snippet below:
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
add a comment
|
You can add animation on image (I have added class on image named 'fadeImage'). And then on click just remove and add same class again.
Also, don't forget to trigger a reflow using the offsetWidth before adding class back.
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
See the Snippet below:
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
add a comment
|
You can add animation on image (I have added class on image named 'fadeImage'). And then on click just remove and add same class again.
Also, don't forget to trigger a reflow using the offsetWidth before adding class back.
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
See the Snippet below:
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
You can add animation on image (I have added class on image named 'fadeImage'). And then on click just remove and add same class again.
Also, don't forget to trigger a reflow using the offsetWidth before adding class back.
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
See the Snippet below:
var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>var slideIndex = 1;
showSlides(slideIndex);
function changePic(n)
showSlides(slideIndex += n);
function currentSlide(n)
showSlides(slideIndex = n);
function showSlides(n)
const urls = [
"https://www.dike.lib.ia.us/images/sample-1.jpg",
"https://www.dike.lib.ia.us/images/sample-2.jpg",
"https://www.dike.lib.ia.us/images/sample-3.jpg"
];
var picture = document.getElementById("pic");
if(n>urls.length)slideIndex = 1
if(n<1)slideIndex = urls.length
picture.src = urls[slideIndex-1];
picture.classList.remove("fadeImage");
void picture.offsetWidth;
picture.classList.add("fadeImage");
.fadeImage
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade
from opacity: .4
to opacity: 1
@keyframes fade
from opacity: .4
to opacity: 1
<div class="slideshow-container">
<div class="fade">
<img id="pic" class="fadeImage">
</div>
<a class="prev" onclick="changePic(-1)">Previous</a>
<a class="next" onclick="changePic(1)">Next</a>
</div>answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
answered Mar 28 at 21:27
Nimitt ShahNimitt Shah
2,7101 gold badge5 silver badges15 bronze badges
2,7101 gold badge5 silver badges15 bronze badges
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
add a comment
|
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
Thank you! That helped. I would never think that there is need to make some kind of "animation restart" in such a scenario.
– Kotori Itsuka
Mar 29 at 15:17
add a comment
|
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55405075%2fcss3-fade-animation-should-work-but-it-doesnt%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your fade class is applied on the parent
<div>. the showSlides(n) function is changing the image source of the<img>, so the fade effect doesn't show up. Can you put your code in a working fiddle, it'll be easier to help with that.– Saharsh
Mar 28 at 19:30