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>
Related
The .car1 moves only when using the #keyframes's from & to but not when using %. Can anyone explain why is that so?
.car1 {
animation: car1 2s 2 forwards;
position: absolute;
}
#keyframes car1 {
from {transform: translateX(550px)}
to {transform: translateX(-550px)}
}
.car2 {
position: absolute;
top: 0;
animation: car2 2s 2 forwards;
}
#keyframes car2 {
0% {top: 30px}
25% {top: 130px}
40% {top: 230px}
75% {top: 330px}
}
<div class="car1">Car1</div>
<div class="car2">Car2</div>
.car1 {
animation: car1 2s 2 forwards;
position: absolute;
}
#keyframes car1 {
0% {transform: translateX(550px)}
100% {transform: translateX(-550px)}
}
.car2 {
position: absolute;
top: 0;
animation: car2 2s 2 forwards;
}
#keyframes car2 {
0% {top: 30px}
25% {top: 130px}
40% {top: 230px}
75% {top: 330px}
}
<div class="car1">Car1</div>
<div class="car2">Car2</div>
Hey just set from 0% and to 100% in #keyframes car1 it works fine!
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">
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?