I've spent the past little while reading up on #keyframes and animation CSS (because honestly my coding skills were stuck mid naughties!) and while I understand how it works in theory my maths isn't working.
What I want is three items to fade in and out over 15 seconds so on an infinite loop.
Item 1 - opacity: 0 at 0% and opacity 1 at 33% then back to opacity 0 for the next 10 seconds (66% and 100%)
Item 2 - opacity: 0 at 0% and 33% before fading in to opacity 1 by 66% and then back out
Item 3 - opacity 0 for the first ten seconds and then fade in to opacity 1 by 99%/100%
The CSS that I have at the moment is
.testimonial-slider {
display: block;
width: 50%;
height: auto;
margin-top: 100px;
}
.testimonial-slider ul.slider {
display: block;
list-style: none;
padding: 0;
position: relative;
display: inline-block;
width: 100%;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
.testimonial-slider ul.slider li {
position: absolute;
display: block;
width: 100%;
opacity: 0;
margin: 0 auto;
}
.testimonial-slider ul.slider li:nth-child(1) {
-webkit-animation: fade-animation-1 15s infinite;
animation: fade-animation-1 15s infinite;
}
.testimonial-slider ul.slider li:nth-child(2) {
-webkit-animation: fade-animation-2 15s infinite;
animation: fade-animation-2 15s infinite;
}
.testimonial-slider ul.slider li:nth-child(3) {
-webkit-animation: fade-animation-3 15s infinite;
animation: fade-animation-3 15s infinite;
.testimonial-slider q {
display: inline-block;
font: normal 30px Helvetica, Arial, Verdana, sans-serif;
letter-spacing: .5pt;
text-shadow: 0 5px 10px rgba(0,0,0,.1);
}
.testimonial-slider .source {
margin-top: 25px;
color: #fff;
font: italic 20px Helvetica, Arial, Verdana, sans-serif;
}
/* KEYFRAME DECLARATIONS */
#keyframes fade-animation 1 {
0% {opacity:0;}
33% {opacity:1;}
65% {opacity:0;}
100% {opacity:0;}
}
#keyframes fade-animation 2 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:1}
100% {opacity:0}
#keyframes fade-animation 3 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:0}
99% {opacity:1}
100% {opacity:0}
#-webkit-keyframes fade-animation-1 {
0% {opacity:0;}
33% {opacity:1;}
65% {opacity:0;}
100% {opacity:0;}
}
#-webkit-keyframes fade-animation-2 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:1}
100% {opacity:0}
#-webkit-keyframes fade-animation 3 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:0}
99% {opacity:1}
100% {opacity:0}
and the corresponding HTML
<div class="testimonial-slider" style="padding:5px;">
<ul class="slider">
<li>
<div class="testimonial-slider-content"> <q>Such a great testimonial goes here!!! Yay!!!.</q>
<p class="source">- Chair</p>
</div>
</li>
<li>
<div class="testimonial-slider-content"> <q>Testimonial 2 content oh yay great testimonial</q>
<p class="source">- Head of Investor Relations</p>
</div>
</li>
<li>
<div class="testimonial-slider-content"> <q>Testimonial content here
</q>
<p class="source">- CEO/Founder</p>
</div>
</li>
</ul>
</div>
So, your code is working fine. The only problem is that you don't have some curly brackets closed.
.testimonial-slider {
display: block;
width: 50%;
height: auto;
margin-top: 100px;
}
.testimonial-slider ul.slider {
display: block;
list-style: none;
padding: 0;
position: relative;
display: inline-block;
width: 100%;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
.testimonial-slider ul.slider li {
position: absolute;
display: block;
width: 100%;
opacity: 0;
margin: 0 auto;
}
.testimonial-slider ul.slider li:nth-child(1){
-webkit-animation: fade-animation-1 15s infinite;
animation: fade-animation-1 15s infinite;
}
.testimonial-slider ul.slider li:nth-child(2) {
-webkit-animation: fade-animation-2 15s infinite;
animation: fade-animation-2 15s infinite;
}
.testimonial-slider ul.slider li:nth-child(3) {
-webkit-animation: fade-animation-3 15s infinite;
animation: fade-animation-3 15s infinite;
}
.testimonial-slider q {
display: inline-block;
font: normal 30px Helvetica, Arial, Verdana, sans-serif;
letter-spacing: .5pt;
text-shadow: 0 5px 10px rgba(0,0,0,.1);
}
.testimonial-slider .source {
margin-top: 25px;
color: #fff;
font: italic 20px Helvetica, Arial, Verdana, sans-serif;
}
/* KEYFRAME DECLARATIONS */
#keyframes fade-animation-1 {
0% {opacity:0;}
33% {opacity:1;}
65% {opacity:0;}
100% {opacity:0;}
}
#keyframes fade-animation-2 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:1}
100% {opacity:0}
}
#keyframes fade-animation-3 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:0}
99% {opacity:1}
100% {opacity:0}
}
#-webkit-keyframes fade-animation-1 {
0% {opacity:0;}
33% {opacity:1;}
65% {opacity:0;}
100% {opacity:0;}
}
#-webkit-keyframes fade-animation-2 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:1}
100% {opacity:0}
}
#-webkit-keyframes fade-animation-3 {
0% {opacity:0}
33% {opacity:0}
66% {opacity:0}
99% {opacity:1}
100% {opacity:0}
}
<div class="testimonial-slider" style="padding:5px;">
<ul class="slider">
<li>
<div class="testimonial-slider-content"> <q>Such a great testimonial goes here!!! Yay!!!.</q>
<p class="source">- Chair</p>
</div>
</li>
<li>
<div class="testimonial-slider-content"> <q>Testimonial 2 content oh yay great testimonial</q>
<p class="source">- Head of Investor Relations</p>
</div>
</li>
<li>
<div class="testimonial-slider-content"> <q>Testimonial content here
</q>
<p class="source">- CEO/Founder</p>
</div>
</li>
</ul>
</div>
Regards
Related
I have an image gallery set up. It transitions to the next photo like a slideshow. I am trying to figure out how to get the images to fade as the slideshow is transitioning to the next image. I've tried to add transitions and opacity but can't seem to get it right. Thanks for the help!
body {
padding: 0;
margin: 0;
}
.slider-frame {
padding: 0;
overflow: hidden;
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#keyframes slide_animation {
0% {
left: 0px;
}
10% {
left: 0px;
}
20% {
left: 1200px;
}
30% {
left: 1200px;
}
40% {
left: 2400px;
}
50% {
left: 2400px;
}
60% {
left: 1200px;
}
70% {
left: 1200px;
}
80% {
left: 0px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}
.slide-images {
width: auto;
height: auto;
margin: 0 0 0 -2400px;
position: relative;
-webkit-animation-name: slide_animation;
animation-name: slide_animation;
-webkit-animation-duration: 33s;
animation-duration: 33s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-play-state: running;
animation-play-state: running;
}
.img-container {
height: 800px;
width: 1200px;
margin-left: auto;
margin-right: auto;
position: relative;
float: left;
}
img {
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
padding-top: 100px;
padding-right: 100px;
padding-left: 100px;
}
<div class="slider-frame">
<div class="slide-images">
<div class="img-container">
<img src="../../assets/img/debug.jpg" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/actual.png" alt="Angular Carousel 1">
</div>
<div class="img-container">
<img src="../../assets/img/face.png" alt="Angular Carousel 1">
</div>
</div>
</div>
To give a fade in effect the below method can be used and you can alter it to your code.
.
fade-in {
animation: fadeIn ease 20s;
-webkit-animation: fadeIn ease 20s;
-moz-animation: fadeIn ease 20s;
-o-animation: fadeIn ease 20s;
-ms-animation: fadeIn ease 20s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
#-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
I am mimicking the Windows 10 start up screen. For those of you familiar with the startup, I have the color transitions complete and one set of flickering text ("Hello!"). But I have no idea how to add new sets of text that will flicker following the ("Hello!") Text.
I've tried to research this but have had no success
The final question is how to flicker multiple sets of text one after another
.wrapper {
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 25s ease infinite;
-o-animation: rainbow 25s ease infinite;
animation: rainbow 25s ease infinite;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#Message {
color: #ffffff;
margin-top: 250px;
}
#keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flickerAnimation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-flicker {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
color: #ffffff;
margin-top: 250px;
}
#greet {
font-family: roboto;
font-weight: 150;
font-size: 30px;
}
<div class="wrapper">
<div class="animate-flicker" align="center">
<p id="greet">Hello!</h2>
</div>
</div>
I have translated your question in following requirements:
Show several words consecutively at the same spot.
Apply an animation on each word.
My animation displays an element 10 times for a short period of time and hides it again. animation-delay ensures that the animation on the second word starts after the first animation has finished and the animation on the third word starts after the second animation has finished.
To center words I positioned them absolute. This was necessary because I could not integrate display: inline; or display: none; in the keyframe animation (property display is not animatable).
span {
animation-name: flickerAnimation;
animation-duration: 0.1s;
animation-iteration-count: 10;
position: absolute;
opacity: 0;
left: 0;
right: 0;
text-align: center;
}
span:nth-child(2) {
animation-delay: 1s;
}
span:nth-child(3) {
animation-delay: 2s;
}
#keyframes flickerAnimation {
0% {opacity: 1;}
80% {opacity: 1;}
81% {opacity: 0;}
100% {opacity: 0;}
}
<div class="wrapper">
<span>First</span>
<span>Second</span>
<span>Third</span>
</div>
I'm trying to play with css3 and its animation and keyframe system but i'm running out of idea's to get this to work..
I rely on this animation that I found on codepen, and I would like to reverse the text revealing ('Escape' move to right and 'into amazing experiences' is revealing right to left)
Here is the CSS:
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
div:first-of-type {
animation: showup 7s infinite;
}
div:last-of-type {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
I tried a lot of things such as adding float, margin, display or edit the keyframes but nothing did the job. The only remarkable change in this animation is the width div so I don't know how to make it work in a reverse situation.
Hoping someone could help me!
This could be help
body {
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-weight: 300;
font-size: 32px;
padding-top: 40vh;
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-size: 30px;
line-height: 1.5;
}
div.lr {
width: 0px;
animation: reveal 7s infinite;
}
div.rl {
animation: showup 7s infinite;
}
div.rl span {
margin-left: -355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width: 375px;}
80% {opacity:1;}
100% {opacity:0;width: 375px;}
}
<div class="lr">
<span>into amazing experiences</span>
</div>
<div class="rl">Escape</div>
You just need to specify animation-direction and set it to reverse. See more about animation-direction property. Here's codepen with reversed animation.
I'm trying to give to the text the same animation of the border, but i don't know how to do it, and I don't know if it is possible. I want to know if you have an idea for this. Thank you for the answers!
.rainbow {
position: absolute;
top: 4px;
left: 4px;
width: 214px;
height: 64px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
}
.bottone {
position: absolute;
z-index: 999;
padding-top: 15px;
text-align: center;
font-family: sans-serif;
width: 200px;
height: 35px;
border: 3px solid transparent;
background: white;
}
#-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
#-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
#-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
#keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
<div class="rainbow"></div>
<a class="bottone">Text</a>
Thank you very much!
Put the background in front of the text, and use mix-blend-mode: screen; on it. Also note the black borders on the outer container.
.rainbow {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 1;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 7s ease infinite;
-z-animation: rainbow 7s ease infinite;
-o-animation: rainbow 7s ease infinite;
animation: rainbow 7s ease infinite;
mix-blend-mode: screen;
pointer-events: none; /** if you want the text to be selectable **/
}
.bottone {
display: inline-block;
position: relative;
padding-top: 15px;
text-align: center;
font-family: sans-serif;
width: 200px;
height: 35px;
border: 3px solid black;
background: white;
}
#-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
#keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
<a class="bottone">
Text
<div class="rainbow"></div>
</a>
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?