Alright, I am trying to make a pure CSS3 image slideshow. (Yes, I know it could be done with JQuery easier.) I cannot get it to work on my browser, chrome, so I have not yet added the syntax for the other browsers.
My HTML is...
<div class="slide-show">
<img src="pictures/slide-1.jpg" alt="Broken Earth" class="slide-1"/>
<img src="pictures/slide-2.jpg" alt="World Map" class="slide-2"/>
<img src="pictures/slide-3.jpg" alt="Sunset" class="slide-3"/>
<img src="pictures/slide-4.jpg" alt="Ursumian Flag" class="slide-4"/>
</div>
And my CSS is...
.slide-show {
border-style: solid;
border-width: 3px;
border-color: #746d27;
overflow: visible;
width: 600px;
height: 300px;
position: relative;
margin-left: auto;
margin-right: auto;
top: 30px;
}
.slide-1 {
position: relative;
-webkit-animation-name: one;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
width: 600px;
height: 300px;
}
.slide-2 {
position: relative;
-webkit-animation-name: two;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
width: 600px;
height: 300px;
}
.slide-3 {
position: relative;
-webkit-animation-name: three;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
width: 600px;
height: 300px;
}
.slide-4 {
position: relative;
-webkit-animation-name: four;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
width: 600px;
height: 300px;
}
#-webkit-keyframes one {
0% {left: 0px; top: 0px;}
15% {left: 0px; top: 0px;}
20% {left: 600px; top: 0px;}
21% {left: 600px; top: 300px;}
22% {left: -600px; top: 300px;}
23% {left: -600px; top: 0px;}
95% {left: -600px; top: 0px;}
100% {left: 0px; top: 0px;}
}
#-webkit-keyframes two {
0% {left: -600px; top: -305px;}
15% {left: -600px; top: -305px;}
20% {left: 0px; top: -305px;}
35% {left: 0px; top: -305px;}
40% {left: 600px; top: -305px;}
41% {left: 600px; top: -5px;}
42% {left: -600px; top: -5px;}
43% {left: -600px; top: -305px;}
100% {left: -600px; top: -305px;}
}
#-webkit-keyframes three {
0% {left: -600px; top: -610px;}
35% {left: -600px; top: -610px;}
40% {left: 0px; top: -610px;}
55% {left: 0px; top: -610px;}
60% {left: 600px; top: -610px;}
61% {left: 600px; top: -310px;}
62% {left: -600px; top: -310px;}
63% {left: -600px; top: -610px;}
100% {left: -600px; top: -610px;}
}
#-webkit-keyframes four {
0% {left: -600px; top: -915px;}
55% {left: -600px; top: -915px;}
60% {left: 0px; top: -915px;}
75% {left: 0px; top: -915px;}
80% {left: 600px; top: -915px;}
81% {left: 600px; top: -615px;}
82% {left: -600px; top: -615px;}
83% {left: -600px; top: -915px;}
100% {left: -600px; top: -915px;}
}
Notice, the "slide-show" class does have "overflow" set to "visible." This is so I can make sure all the images are shifting properly. When they do, that will be switched to "hidden." There are 4 pictures, and each should only be moving in/out of the stage for 2 seconds total, and each should spend 3 seconds total sitting in the stage. Why do I have a lag in the last slide?
Don't only use -webkit-, add another one for every 'style' without the -webkit-
Also, can you provide a demo?
Related
I am making another site and this time I want to create an image introduction
Here is what i have tried:
<style>
#keframes intro {
0% {background-image: url('intro1.jpg'); top: 0px; left: 0px;}
25% {background-image: url('intro1.jpg'); top: 0px; left: 200px;}
50% {background-image: url('intro1.jpg'); top: 200px; left: 200px;}
75% {background-image: url('intro1.jpg'); top: 0; left: 100px;}
100% {background-image: url('intro1.jpg); top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
}
</style>
<div>
</div>
And nothing appears. Is it possible to make an image introduction like GMail does?
Thanks,
Ring Games
The reason for the image not showing up is maybe because it was not yet loaded, because at each keyframe, it load the background-image, and since it doesn't need to be animated (and by the way background images are not animable.). A solution would be to put the background-image outside the keyframes.
<style>
#keframes intro {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 200px;}
50% { top: 200px; left: 200px;}
75% { top: 0; left: 100px;}
100% { top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
background-image: url('intro1.jpg'); /* Put this here instead, it doesn't change and can't animate and on each animation it is being loaded so it might take time to be loaded and rendered, that's why you probably won't see it at all. */
}
</style>
<div>
</div>
So i have a form, but i want it on my slider. The form is in a div and the slider is aswell.
This is the HTML
<div id="slider" >
<figure>
<img src="slider1.png" >
<img src="allevoertuigen.png">
<img src="THEORIECURSUS.png">
<img src="PAKKETTEN.png">
<img src="CONTACT.PNG">
</figure>
</div>
This is the CSS
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100
}
45% {
left: -100%
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
Form is a div with a form tag with labels and submit buttons in it. IF you guys still need the Form code too, here is the gyazo of it. :
https://gyazo.com/1280234e8f37ae6bd8d01bb265ad61d4
I`ve found some things missing in the beginning of the css
0% {left: 0;}
20% {left: 0;}
25% {left: -100;}
45% {left: -100%;}
50% {left: -200%;}
70% {left: -200%;}
75% {left: -300%;}
95% {left: -300%;}
100% {left: -400%;}
Maybe is just that.
This is how it is being rendered in other browsers
This is how it is being renderd on IE11
I have used the following keyframing animation
.support_team_bubble{
height: 15px;
width: 15px;
position: absolute;
top: 33%;
left: 52.5%;
border-radius: 50%;
background: red;
-webkit-animation: bubbleMoveSupport 3.5s infinite;
-moz-animation: bubbleMoveSupport 3.5s infinite;
-o-animation: bubbleMoveSupport 3.5s infinite;
animation: bubbleMoveSupport 3.5s infinite;
-ms-animation: bubbleMoveSupport 3.5s infinite;
}
#-webkit-keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%;}
60% {top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%;}
90% {top: 25.9%;}
100% {left: 65.5%;}
100% {top: 25.9%;}
}
#keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%;}
60% {top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%;}
90% {top: 25.9%;}
100% {left: 65.5%;}
100% {top: 25.9%;}
}
<div class="support_team_bubble"></div>
Note: the above code is for top right (first chat bubble).
Is there something I need to take care of and I am missing in case on Internet explorer ?
It may be due to the multiple declarations of percentage keyframe points. Try combining your properties for duplicate keyframe points, like so:
.support_team_bubble {
height: 15px;
width: 15px;
position: absolute;
top: 33%;
left: 52.5%;
border-radius: 50%;
background: red;
-webkit-animation: bubbleMoveSupport 3.5s infinite;
-moz-animation: bubbleMoveSupport 3.5s infinite;
-o-animation: bubbleMoveSupport 3.5s infinite;
animation: bubbleMoveSupport 3.5s infinite;
-ms-animation: bubbleMoveSupport 3.5s infinite;
}
#-webkit-keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%; top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%; top: 25.9%;}
100% {left: 65.5%; top: 25.9%;}
}
#keyframes bubbleMoveSupport{
0% {left: 52.5%;}
50% {left: 60.2%;}
60% {left: 60.2%; top: 33%;}
80% {top: 25.9%;}
90% {left: 60.2%; top: 25.9%;}
100% {left: 65.5%; top: 25.9%;}
}
<div class="support_team_bubble"></div>
This is the CSS code I'm using:
img {
position: relative;
-webkit-animation: movingImage infinite linear 2s infinite;
animation: movingImage infinite linear 2s infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
And the HTML that I have:
<img src="image.png" width="50" height="50" alt="Image">
The correct animation full syntax is:
#keyframes name | duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state
In your example:
animation: movingImage infinite linear 2s infinite;
The last infinite is not a valid value anymore, as you already declared it earlier.
The correct full syntax is:
animation: movingImage 2s linear 0s infinite normal none running;
Or the shorten version:
animation: movingImage 2s linear infinite;
JsFiddle Demo
img {
position: relative;
-webkit-animation: movingImage 2s linear infinite;
animation: movingImage 2s linear infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
<img src="image.png" width="50" height="50" alt="Image">
Here is in fiddle an example of the problem that I'm facing. This animation has different behavior in different browsers. I need to make all work as Chrome. Tested on Chrome and Firefox.
HTML:
<div class='wrap'>
<div class='animate'></div>
</div>
CSS:
#keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{ width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% { width: 0;}
}
#-webkit-keyframes test {
0% {
left: 0;
right: inherit;
width: 0;
}
10%{ width: 100%;}
49%{width: 100%;}
59% {
left: inherit;
right: 0;
width: 0;
}
100% {width: 0;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}
You can use this solution jsfiddle.net/vVGmR/2 - the only one css rule is animated here and it works. Tested on IE10, latest Firefox, Opera and Chrome
#keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
#-webkit-keyframes test {
0% {left: -100%;}
10% {left: 0;}
49% {left: 0;}
59% {left: 100%;}
99.99% {left: 100%;}
100% {left: -100%;}
}
.wrap{
height: 10px;
position: relative;
width: 100%;
overflow: hidden;
}
.animate{
background: #000;
height: 10px;
position: absolute;
top: 0;
width: 100%;
-webkit-animation: test 6s infinite;
animation: test 6s infinite;
}