So as the title says, my keyframes are glitchy on Safari only. It works perfectly fine on moz, ms,o but not on safari. Here is the code of my keyframes :
#keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-webkit-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-moz-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-ms-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
#-o-keyframes bar_progress {
0% { width: 0%; left:0; }
25% { width: 20%; left:50%;}
50% { width: 0%; left:100%; }
75% { width: 20%; left:50%;}
100%{ width: 0%; left:0;}
}
And here is my progress_bar class that calls the key frame :
.progress_bar {
position:absolute;
left:0;
top:0;
width:0%;
height:2px;
background: blue;
animation: bar_progress 2s linear infinite;
-webkit-animation: bar_progress 2s linear infinite;
-moz-animation: bar_progress 2s linear infinite;
-ms-animation: bar_progress 2s linear infinite;
-o-animation: bar_progress 2s linear infinite;
}
Thank you in advance!
Related
Good day, there was the task to make the animation of an airplane flying around a path. I decided to take advantage of the opportunities in CSS3. But all I have achieved is one animation cycle. The plane flies one circle around the path and the animation stops. I tried using animation-iteration-count with infinite, but all I got was the flight of a plane in chaotic directions. Below is my code, please tell me how to loop this animation so that the plane constantly flies in a circle without stopping.
Code
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
bottom: -13px;
left: 100%;
animation-iteration-count: 3;
animation: flyLeft 1.5s linear forwards, rotatePlane 0.5s linear 1.5s forwards, flyUp 1s linear forwards 2s, RotateRight 0.5s linear 2.8s forwards, MoveRight 3s linear forwards 3s, RotateDown 1s linear 6s forwards, flyDown 1s linear forwards 7s, RotateLeft 1s linear 7.8s forwards;
}
#keyframes flyLeft {
100% {
left: -14px;
}
}
#keyframes rotatePlane {
100% {
transform: rotateZ(90deg);
}
}
#keyframes flyUp {
100% {
bottom: 100%;
}
}
#keyframes RotateRight {
0% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(180deg);
}
}
#keyframes MoveRight {
0% {
left: -14px;
}
100% {
left: 380px;
}
}
#keyframes RotateDown {
0% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(270deg);
}
}
#keyframes flyDown {
0% {
bottom: 100%;
}
100% {
bottom: -8%;
}
}
#keyframes RotateLeft {
0% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
You need to wrap all the animations in one #keyframes CSS at-rules to easily make repetitions. Here's a working solution below that wraps all the animations in one #keyframes.
.wrap {
margin: 100px;
}
.route {
height: 200px;
width: 400px;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
right: 0;
bottom: 0;
transform: translate(50%, 50%);
animation: travelRoundTheBorder 10s linear infinite;
}
#keyframes travelRoundTheBorder {
30% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%);
}
32.5% {
bottom: 0;
right: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
47.5% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(90deg);
}
50% {
right: 100%;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
80% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(180deg);
}
82.5% {
right: 0;
bottom: 100%;
transform: translate(50%, 50%) rotate(270deg);
}
97.5% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(270deg);
}
100% {
right: 0;
bottom: 0;
transform: translate(50%, 50%) rotate(360deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Splitting the movement along the path and the turns into TWO separate keyframes makes this easier.
The math of the percentages is based on a square but with a rectangle the percentages change.
CSS variable could help here to work out those percentages but I haven't gone deeper into that for the demo purposes.
.wrap {
margin: 10px;
}
.route {
height: 150px;
width: 150px;
margin: auto;
border: 3px dotted #000;
position: relative;
}
.plane {
position: absolute;
transform: translate(-50%, -50%) rotate(180deg);
top: 0;
left: 0;
animation: path 6s linear infinite, turn 6s ease infinite;
}
#keyframes path {
0%,
100% {
left: 0;
top: 0;
}
25% {
left: 100%;
top: 0;
}
50% {
left: 100%;
top: 100%;
}
75% {
left: 0;
top: 100%;
}
}
#keyframes turn {
0%,
24% {
transform: translate(-50%, -50%) rotate(180deg);
}
25%,
49% {
transform: translate(-50%, -50%) rotate(270deg);
}
50%,
74% {
transform: translate(-50%, -50%) rotate(0deg);
}
75%,
99% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(90deg);
}
}
<div class="wrap">
<div class="route">
<img class="plane" src="http://p36099-290-14699.s290.upress.link/wp-content/uploads/2020/05/plane.png">
</div>
</div>
Just to begin testing new CSS posibilities, offset-path (not supported in IE, experimental in FF)
reference
#container {
width: 400px;
height: 300px;
border: dotted 5px black;
margin: 30px;
}
#motion-demo {
offset-path: path('M0 -10 H400 A 10 10 1 0 1 410 0 V300 A 10 10 1 0 1 400 310 H0 A 10 10 1 0 1 -10 300 V0');
animation: move 10s infinite linear;
width: 40px;
height: 40px;
background: cyan;
}
#keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
<div id="container">
<div id="motion-demo">A</div>
</div>
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
I have a problem centering a text rotating animation. The first word appears correctly at the center of the page (centered both horizontally and vertically) but the second and third one appear at the top of the screen (only centered horizontally). I want them to appear at the center of the page one after the other. Thanks in advance!
Here is the code used:
.slidingHorizontal{
font-family: Helvetica ;
font-size: 82px;
text-shadow: grey 0px 0px 4px ;
text-align: center;
display: inline;
text-indent: 8px;
color: black;
}
.slidingHorizontal span{
animation: leftToRight 7.5s linear infinite 0s;
-ms-animation: leftToRight 7.5s linear infinite 0s;
-webkit-animation: leftToRight 7.5s linear infinite 0s;
opacity: 0;
position: static;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
#-moz-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform-origin: 50% 50%; }
10% { opacity: 1; -moz-transform-origin: 50% 50%; }
25% { opacity: 1; -moz-transform-origin: 50% 50%; }
30% { opacity: 0; -moz-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform-origin: 50% 50%; }
10% { opacity: 1; -webkit-transform-origin: 50% 50%; }
25% { opacity: 1; -webkit-transform-origin: 50% 50%; }
30% { opacity: 0; -webkit-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes leftToRight{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform-origin: 50% 50%; }
10% { opacity: 1; -ms-transform-origin: 50% 50%; }
25% { opacity: 1; -ms-transform-origin: 50% 50%; }
30% { opacity: 0; -ms-transform-origin: 50% 50%; }
80% { opacity: 0; }
100% { opacity: 0; }
}
<div class="slidingHorizontal">
<span>FIRST</span>
<span>SECOND</span>
<span>THIRD</span>
</div>
first is showing on left corner for me as well.
have a look here, those are both centralized in the middle of the page
see the demo: jsfiddle.net/y5L5xb6a/
So i'm trying to use this CSS slider and it works perfect in IE and firefox, but not for chrome. When the first image loads it looks normal but when the second image has filled the box i get a white box in the bottom of the page. Image
I found this code at Pure CCS3 Cycling Slideshow but this problem occurred when i tried to customize it for my school project.
HTML:
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<img src="images/turtleSlider/tur1.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
<li id="second" class="secondanimation">
<img src="images/turtleSlider/tur2.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>My Dad Tomas & A Turtle</h1> </div>
</li>
<li id="third" class="thirdanimation">
<img src="images/turtleSlider/tur3.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
<li id="fourth" class="fourthanimation">
<img src="images/turtleSlider/tur4.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Me & A Turtle</h1> </div>
</li>
<li id="fifth" class="fifthanimation">
<img src="images/turtleSlider/tur5.jpg" alt="Turtle"/>
<div class="tooltip"> <h1>Turtle</h1> </div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
CSS:
html{
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family:"Open Sans", serif;
margin: 30px 15% 20px 15%;
min-width: 1010px;
}
#slider {
border: 5px solid #eaeaea;
box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
height: 500px;
width: 667px;
overflow: visible;
position: relative;
float: left;
}
#mask {
overflow: hidden;
height: 500px;
}
#slider ul {
margin: 0;
padding: 0;
position: relative;
}
#slider li {
width: 667px; /* Width Image */
height: 500px; /* Height Image */
position: absolute;
top: -505px; /* Original Position - Outside of the Slider */
list-style: none;
}
#slider li.firstanimation {
-webkit-animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;
animation: cycle 25s linear infinite;
}
#slider li.secondanimation {
-webkit-animation: cycletwo 25s linear infinite;
-moz-animation: cycletwo 25s linear infinite;
animation: cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-webkit-animation: cyclethree 25s linear infinite;
-moz-animation: cyclethree 25s linear infinite;
animation: cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-webkit-animation: cyclefour 25s linear infinite;
-moz-animation: cyclefour 25s linear infinite;
animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-webkit-animation: cyclefive 25s linear infinite;
-moz-animation: cyclefive 25s linear infinite;
animation: cyclefive 25s linear infinite;
}
#-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:505px; opacity:0; z-index:0; }
21% { top:-505px; opacity:0; z-index:-1; }
50% { top:-505px; opacity:0; z-index:-1; }
92% { top:-505px; opacity:0; z-index:0; }
96% { top:-505px; opacity:0; }
100%{ top:0px; opacity:1; }
}
#-webkit-keyframes cycletwo {
0% { top:-505px; opacity:0; }
16% { top:-505px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:505px; opacity:0; z-index:0; }
41% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclethree {
0% { top:-505px; opacity:0; }
36% { top:-505px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:505px; opacity:0; z-index:0; }
61% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclefour {
0% { top:-505px; opacity:0; }
56% { top:-505px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:505px; opacity:0; z-index:0; }
81% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-webkit-keyframes cyclefive {
0% { top:-505px; opacity:0; }
76% { top:-505px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:505px; opacity:0; z-index:0; }
}
#-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:505px; opacity:0; z-index:0; }
21% { top:-505px; opacity:0; z-index:-1; }
92% { top:-505px; opacity:0; z-index:0; }
96% { top:-505px; opacity:0; }
100%{ top:0px; opacity:1; }
}
#-moz-keyframes cycletwo {
0% { top:-505px; opacity:0; }
16% { top:-505px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:505px; opacity:0; z-index:0; }
41% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclethree {
0% { top:-505px; opacity:0; }
36% { top:-505px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:505px; opacity:0; z-index:0; }
61% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclefour {
0% { top:-505px; opacity:0; }
56% { top:-505px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:505px; opacity:0; z-index:0; }
81% { top:-505px; opacity:0; z-index:-1; }
100%{ top:-505px; opacity:0; z-index:-1; }
}
#-moz-keyframes cyclefive {
0% { top:-505px; opacity:0; }
76% { top:-505px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:505px; opacity:0; z-index:0; }
}
#keyframes cycle {
0% { top: 0px; } /* When you start the slide, the first image is already visible */
4% { top: 0px; } /* Original Position */
16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
20% { top: 505px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
21% { top: -505px; opacity: 0; z-index: -1; } /* Return to Original Position */
92% { top: -505px; opacity: 0; z-index: 0; }
96% { top: -505px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
100%{ top: 0px; opacity: 1; }
}
#keyframes cycletwo {
0% { top: -505px; opacity: 0; } /* Original Position */
16% { top: -505px; opacity: 0; }/* Starts moving after 16% to this position */
20% { top: 0px; opacity: 1; }
24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/
36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 seconds the image is visible */
40% { top: 505px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
41% { top: -505px; opacity: 0; z-index: -1; } /* Return to Original Position */
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclethree {
0% { top: -505px; opacity: 0; }
36% { top: -505px; opacity: 0; }
40% { top: 0px; opacity: 1; }
44% { top: 0px; opacity: 1; }
56% { top: 0px; opacity: 1; }
60% { top: 505px; opacity: 0; z-index: 0; }
61% { top: -505px; opacity: 0; z-index: -1; }
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclefour {
0% { top: -505px; opacity: 0; }
56% { top: -505px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; }
76% { top: 0px; opacity: 1; z-index: 0; }
80% { top: 505px; opacity: 0; z-index: 0; }
81% { top: -505px; opacity: 0; z-index: -1; }
100%{ top: -505px; opacity: 0; z-index: -1; }
}
#keyframes cyclefive {
0% { top: -505px; opacity: 0; }
76% { top: -505px; opacity: 0; }
80% { top: 0px; opacity: 1; }
84% { top: 0px; opacity: 1; }
96% { top: 0px; opacity: 1; z-index: 0; }
100%{ top: 505px; opacity: 0; z-index: 0; }
}
.progress-bar {
position: relative;
top: -5px;
width: 750px;
height: 5px;
background: #000;
-webkit-animation: fullexpand 25s ease-out infinite;
-moz-animation: fullexpand 25s ease-out infinite;
animation: fullexpand 25s ease-out infinite;
}
#-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#keyframes fullexpand {
/* In these keyframes, the progress-bar is stationary */
0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }
/* In these keyframes, the progress-bar starts to come alive */
4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }
/* In these keyframes, the progress-bar moves forward for 3 seconds */
16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }
/* In these keyframes, the progress-bar has finished his path */
17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }
/* In these keyframes, the progress-bar will disappear and then resume the cycle */
18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}
#slider:hover .progress-bar {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#slider .tooltip {
background: rgba(0,0,0,0.7);
width: 300px;
height: 60px;
position: relative;
bottom: 75px;
left: -320px;
transition: all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color: #fff;
font-size: 24px;
font-weight: 300;
line-height: 60px;
padding: 0 0 0 10px;
text-align: Right;
margin-right: 10px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left: 0px;
}
Add following code to your CSS file:
html,
body{
height: 100%;
}
This white rectangle is an empty space on the page because document does not cover whole view-port.
I figured it out. I added some credits at the bottom as a <footer> and now it doesn't show up anymore. Thanks for the help though!
I would like to build a animated spinner with CSS3.
It should behave like this :
After the last state it should start again like in the first state.
I managed to create circles using the technique explained here : stackoverflow question
Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either.
CSS3 spinner
This CSS preloader uses keyframe animations and transform-rotate CSS3 properties to make the circle and the filling color.
This spinner is responsive.
.sp1 {
margin: 50px auto;
position: relative;
width: 30%;
padding-bottom: 30%;
overflow: hidden;
background-color: #557733;
border-radius: 50%;
z-index: 1;
}
.sp:before,
.sp:after {
content: '';
position: absolute;
height: 100%;
width: 50%;
background-color: #99FF33;
}
.sp1:after {
width: 80%;
height: 80%;
margin: 10%;
border-radius: 50%;
background-color: #fff;
z-index: 6;
}
.sp1:before {
background-color: inherit;
z-index: 5;
}
.sp2:before {
z-index: 4;
-webkit-animation: spin1 3s linear infinite;
animation: spin1 3s linear infinite;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.sp2:after {
opacity: 0;
right: 0;
z-index: 6;
-webkit-animation: spin2 3s linear infinite;
animation: spin2 3s linear infinite;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
50%, 100% { -webkit-transform: rotate(180deg); }
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
50%, 100% { transform: rotate(180deg); }
}
#-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { -webkit-transform: rotate(0deg); opacity: 1; }
100% { -webkit-transform: rotate(180deg); opacity: 1;
}
}
#keyframes spin2 {
0% { transform: rotate(0deg); opacity: 0; }
49.99% { opacity: 0; }
50% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(180deg); opacity: 1; }
}
<div class="sp sp1">
<div class="sp sp2"></div>
</div>
Fiddle demo