I got a css slideshow off the net and installed it , the demo had 8 images in it but i only wanted 3 , so i've have tried this a 100 times to get it working , but i simply can't
I set up a jsfiddle for the initial version - http://jsfiddle.net/jyfcm4jh/ which works perfectly.
And also set one up for the modified version , with only 3 images displaying , but you can see there is a blank space appearing before each image slides to the next
http://jsfiddle.net/jyfcm4jh/1/
Here is my css i edited for only 3 images
.css-slideshow img:nth-child(1) {
-webkit-animation:xfade 15s 10s infinite;
-moz-animation:xfade 15s 10s infinite;
-ms-animation:xfade 15s 10s infinite;
-o-animation:xfade 15s 10s infinite;
animation:xfade 15s 10s infinite;
}
.css-slideshow img:nth-child(2) {
-webkit-animation:xfade 15s 5s infinite;
-moz-animation:xfade 15s 5s infinite;
-ms-animation:xfade 15s 5s infinite;
-o-animation:xfade 15s 5s infinite;
animation:xfade 15s 5s infinite;
}
.css-slideshow img:nth-child(3) {
-webkit-animation:xfade 15s 0s infinite;
-moz-animation:xfade 15s 0s infinite;
-ms-animation:xfade 15s 0s infinite;
-o-animation:xfade 15s 0s infinite;
animation:xfade 15s 0s infinite;
}
The problem comes from your "xfade" percentages (of #keyframes).
Here is how you should choose your values (from this website):
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
EDIT:
In your case:
a = 4s (each color frame appears during 4s)
b = 1s (the transition lasts 1s)
t = 15s (you chose 15s for the total duration)
So your percentages in CSS should be something like this (for each browser equivalent):
#-webkit-keyframes xfade {
0% {
filter:alpha(opacity=100);
opacity:1;
}
27% {
filter:alpha(opacity=100);
opacity:1;
}
33% {
filter:alpha(opacity=0);
opacity:0;
}
93% {
filter:alpha(opacity=0);
opacity:0;
}
100% {
filter:alpha(opacity=100);
opacity:1;
}
}
And finally, you should remove this CSS property (unless you want a white frame effect for each transition):
/*
.css-slideshow img:nth-child(1),
.css-slideshow img:nth-child(2),
.css-slideshow img:nth-child(3) {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter:alpha(opacity=0);
opacity:0;
}
*/
You're all set!
JSFIDDLE
Related
I have a text spinner/rotator on my website,
link: http://jaaplangenberg.nl/index2.php
The problem is, on my IPhone it doesnt work, instead of the spinning word is all I see is empty space.
EDIT: I see it doesnt work on Safari in general (also browser)
I can't figure out what is wrong!
This is the code:
<p class="slogan">Je <span id="spin"></span> <br />van betekenis.</p>
And the css:
#spin:after {
content:"";
animation: spin 10s linear infinite;
-webkit-animation: spin 10s linear infinite; /* Safari 4+ */
-moz-animation: spin 10s linear infinite; /* Fx 5+ */
-o-animation: spin 10s linear infinite; /* Opera 12+ */
animation: spin 10s linear infinite; /* IE 10+ */
}
#keyframes spin {
0% { content:"merk"; }
50% { content:"missie"; }
100% { content:"verhaal"; }
}
#-webkit-keyframes spin {
0% { content:"merk"; }
50% { content:"missie"; }
100% { content:"verhaal"; }
}
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
I am trying to show div after 10s.
It gets success, but it is also hiding automatically.
I don't want to hide it!
I tried: http://jsfiddle.net/omarqa/fs69z2e7/
Remove opacity: 0; from class element-to-animate
New code:
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s;
-moz-animation: NAME-YOUR-ANIMATION 10s;
-o-animation: NAME-YOUR-ANIMATION 10s;
animation: NAME-YOUR-ANIMATION 10s;
}
You have a animation, every animation has an interval.
if you want that be loop the animation you have to set
animation-iteration-count: 1;
https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp
Replace opacity value at 100% from 0 to 1 in all your keyframes.
And add animation-fill-mode: forwards property in your class .element-to-animate
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s forwards;
-moz-animation: NAME-YOUR-ANIMATION 10s forwards;
-o-animation: NAME-YOUR-ANIMATION 10s forwards;
animation: NAME-YOUR-ANIMATION 10s forwards;
opacity:0;
}
For hiding an element after 5 seconds, I have used below code.
But it does not work in Firefox.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
There are some issues with the code above:
The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard).
The overflow property is not animatable.
Firefox has a history of issues with the visibility property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).
Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from in the CSS animation. The thing is that Firefox is not animating the visibility, but it will apply the style in the from part of the animation anyway, so you'll get the desired effect.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
#-webkit-keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
If the duration of the animation was higher than 0 seconds, this solution wouldn't work; but as the change is automatic, it works fine (and it will not affect the rest of the browsers).
The advantages of this solution:
The behavior is the same in all the browsers.
The hidden text is not selectable.
The disadvantages:
This is a workaround and not how things should be done.
It does not work if the duration of the effect is higher than 0s.
Try to use fixed width and height for your block (in % or px) and opacity instead visibility — http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:
.classname {
width: 200px;
height: 50px;
-webkit-animation: css-animation 0s ease-in 5s forwards;
animation: css-animation 0s ease-in 5s forwards;
}
#-webkit-keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
#keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
i have a banner that move when i pass the mouse over it, and when the mouse exit, the banner go back to it's original position, i want to know how to make it stop at it's current position after animation (i don't want to reset each time )
this is how it moves :
/*keyframe animations*/
.first:hover {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
There are a couple of things to think about:
You will likely need to hover another element like a containing div, its hard to continue to hover over an element when it goes off screen.
Add an animation fill mode, this will persist the end state of the animation for as long as the user continues to hover.
Working Example
<div class="container">
<div class="first"></div>
</div>
.container:hover .first{
-webkit-animation: bannermove 30s linear both;
-moz-animation: bannermove 30s linear both;
-ms-animation: bannermove 30s linear both;
-o-animation: bannermove 30s linear both;
animation: bannermove 30s linear both;
}
#keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
If you need the animation end state to persist after the user isn't hovering anymore you may want to consider using a little script to add the animation by adding a class, like so:
Working Example 2
$('.first').mouseenter(function(){
$('.first').addClass('banner');
});
.banner{
-webkit-animation: bannermove 30s linear both;
-moz-animation: bannermove 30s linear both;
-ms-animation: bannermove 30s linear both;
-o-animation: bannermove 30s linear both;
animation: bannermove 30s linear both;
}
If you should need to have the animation pause when the user is no longer hovering and resume when hovered again:
Working Example 3
$('.first').hover(function () {
$('.first').addClass('banner');
$('.banner').css('animationPlayState', 'running');
},
function () {
$('.banner').css('animationPlayState', 'paused');
});
.first:hover {
-webkit-animation: bannermove 30s linear ;
-moz-animation: bannermove 30s linear ;
-ms-animation: bannermove 30s linear ;
-o-animation: bannermove 30s linear ;
animation: bannermove 30s linear
}
by placing infinite you set the iteration count to constantly play back repetitively. Taking out infinite will solve your issue.