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">
Related
I would like to use this image slider: http://codepen.io/rslglover/pen/DBvoA
The image slider works well, but when its finish, it stops. I can't see whats the difference is from the CodePen codes, and what I've done. How can it be it works in the CodePen link?
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}
#keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
And my html
<div class="galleryInfo">
<div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>
Check this out:
HTML:
<div class="galleryInfo">
<div class="gallery">
<section>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
</div>
</div>
CSS:
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -200px;}
100%{left: -200px;}
}
Or change position in css file clas galleryInfo and gallery above animation.
The primary reason why your animation appears to stop, is because the CSS is structured for 10 slides.
To maintain the same duration and animation, the keyframes percentages need to be configured for the new total number of slides you are using.
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
By changing the keyframes, you will maintain the same slide speed as your codepen example had.
Here is a working snippet.
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 200px;
background: #292929;
color: #e3e3e3;
width: 200px;
height: 200px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 80px;
}
/*
* As each slide's animation is 5s, the set duration is totalSlides * 5.
*/
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
<section>
<article>Slide 1</article>
<article>Slide 2</article>
<article>Slide 3</article>
<article>Slide 4</article>
</section>
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>
i have following code to move div into left,
But what i want is to move it to left and then again move it back,,This should auto play..any idea??
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Thank you!
You just need to add animation-direction: alternate. It will animate from the last keyframe value.
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: mymove 5s infinite alternate;
animation: mymove 5s infinite alternate;
position: absolute;
-webkit-backface-visibility: hidden;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div></div>
the following code should work
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
#keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
<div></div>
The first animation works in Firefox, but the last doesn't work. What could be the problem?
Is there something what I've missed?
http://jsfiddle.net/s6n4sc0s/
CSS:
#container {
width:300px;
height: 250px;
/*overflow:hidden;*/
}
#image{
display: block;
width: 300px;
height: 250px;
float:left;
position: relative;
}
h1{
color: #aaba38;
font-size: 26px;
font-weight: bold;
}
#title{
position: relative;
-webkit-animation: mailigen 20s infinite; /* Chrome, Safari, Opera */
animation: mailigen 20s infinite;
}
#slide{
float:left; position: relative; width:200px; text-align:right;
position: relative;
-webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove 20s infinite;
-o-animation: mymove 20s infinite;
animation: mymove 20s infinite;
}
#slide2{
position: relative;
-webkit-animation: mymove2 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: mymove2 20s infinite;
-o-animation: mymove2 20s infinite;
animation: mymove2 20s infinite;
}
#slide3{
position: relative;
-webkit-animation: circle2 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: circle2 20s infinite;
-o-animation: circle2 20s infinite;
animation: circle2 20s infinite;
}
#slide4{
position: relative;
-webkit-animation: circle3 20s infinite; /* Chrome, Safari, Opera */
-moz-animation: circle3 20s infinite;
-o-animation: circle3 20s infinite;
animation: circle3 20s infinite;
}
/* Chrome, Safari, Opera TITLE*/
#-webkit-keyframes mailigen {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
100% {right: 210px;}
}
/* Standard syntax */
#keyframes mailigen {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
100% {right: 210px;}
}
/* Chrome, Safari, Opera FOR SLIDE1*/
#-webkit-keyframes mymove {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
20% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes mymove {
0% {right: 0px;}
5% {right: 210px;}
10% {right: 210px;}
20% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 1*/
#-webkit-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
#-moz-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
#-o-keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes mymove2 {
20% {right: 0px;}
25% {right: 260px;}
30% {right: 260px;}
40% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 2*/
#-webkit-keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
/* Chrome, Safari, Opera FOR CIRCLE 3*/
#-webkit-keyframes circle3 {
60% {right: 0px;}
65% {right: 0px;}
70% {right: 260px;}
80% {right: 0px;}
100% {right: 0px;}
}
/* Standard syntax */
#keyframes circle3 {
60% {right: 0px;}
65% {right: 0px;}
70% {right: 260px;}
80% {right: 0px;}
100% {right: 0px;}
}
.first, .second, .third{
float: left;
position: relative;
width: 200px;
left: 300px;
top: -260px;
text-align: right;
}
.second{padding-bottom:20px;}
/* CIRCLE ONE */
.circle {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #bec751;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}
/* CIRCLE TWO */
.circle2 {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #843881;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle2 span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}
/* CIRCLE THREE */
.circle3 {
position: absolute;
left: 320px;
top: 39px;
border-radius: 50%;
width: 180px;
height: 180px;
background-color: #146671;
opacity: 0.8;
border: 5px solid #ffffff;
/* width and height can be anything, as long as they're equal */
}
.circle3 span {
color: #ffffff;
font-family: Arial;
font-size: 23px;
left: 40px;
position: relative;
font-weight: bold;
text-transform: uppercase;
top: 37px;
text-align: center ;
}
So the correct answer is, that its needed to put 0% and 100% for other browsers that chrome
#-moz-keyframes circle2 {
0% {right: 0px;}
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
You don't have a #-moz-keyframes set for the circle animations. Add
#-moz-keyframes circle2 {
40% {right: 0px;}
45% {right: 0px;}
50% {right: 260px;}
60% {right: 0px;}
100% {right: 0px;}
}
To the end of your CSS for each animation. See this answer for further information
Why isn't -moz-animation working?
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?