I have this icon (png)
and I was wondering how to create it only using HTML and CSS and animated, so those 3 quadrangles keep on changing their opacity (one after each other), so it looks kinda like a loader.
Any ideas? Thanks!
-
1You should look into keyframes: w3schools.com/css/css3_animations.aspJonan– Jonan2014-09-17 08:16:01 +00:00Commented Sep 17, 2014 at 8:16
-
2Probably the css3 code necessary to create this kind of effect is heavier than encoding a small animated gif as data-uri in base64 :)Fabrizio Calderan– Fabrizio Calderan2014-09-17 08:20:29 +00:00Commented Sep 17, 2014 at 8:20
-
can be done with css... but I agree with Fabrizio, too much work when a single gif will work the same (and can be seen in older browsers)Alvaro Menéndez– Alvaro Menéndez2014-09-17 08:22:41 +00:00Commented Sep 17, 2014 at 8:22
Add a comment
|
2 Answers
Check this http://jsfiddle.net/jo3d9f27/
HTML
<div id="down"></div>
<div id="down1"></div>
<div id="down2"></div>
CSS
#down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity:0;
border-top: 20px solid #f00;
}
#down1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
#down2 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
@-webkit-keyframes anim{
from{opacity:0;}
to{opacity:1;}
}
#down{
-webkit-animation:anim 4s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes anim2{
from{opacity:0;}
to{opacity:1;}
}
#down1{
-webkit-animation:anim2 4s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes anim3{
from{opacity:0;}
to{opacity:1;}
}
#down2{
-webkit-animation:anim 4s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
}
7 Comments
Pascal
problem when browser not support webkit
Akshay
@Synoon which is your browser??
Pascal
ie8 -.- But today webkit should work over all browser I think but how do you included the picture? I don't see any picture background code or sth like this...
Akshay
@Synoon it's not a picture those are three triangular divs
Alvaro Menéndez
I Upgrade your fiddle with the shape that Very Curious wanted: jsfiddle.net/jo3d9f27/2
|
DEMO
http://jsfiddle.net/rijosh/u5r5vrk2/2/
HTML
<div id="mouse-scroll" class="ng-scope" style="display: block;">
<div class="mouse"><div class="wheel"></div></div>
<div><span class="unu"></span> <span class="doi"></span> <span class="trei"></span> </div>
</div>
CSS
#mouse-scroll {position:fixed;margin:auto;left:50%;bottom:80px;-webkit-transform:translateX(-50%);z-index:9999}
#mouse-scroll span {display:block;width:5px;height:5px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);border-right:2px solid #dddddd;border-bottom:2px solid #dddddd;margin:0 0 3px 5px}
#mouse-scroll .unu {margin-top:6px}
#mouse-scroll .unu, #mouse-scroll .doi, #mouse-scroll .trei {-webkit-animation:mouse-scroll 1s infinite;-moz-animation:mouse-scroll 1s infinite}
#mouse-scroll .unu {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-webkit-animation-direction:alternate}
#mouse-scroll .doi {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-direction:alternate}
#mouse-scroll .trei {-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-direction:alternate}
#mouse-scroll .mouse {height:21px;width:14px;border-radius:10px;-webkit-transform:none;-ms-transform:none;transform:none;border:2px solid #dddddd;top:170px}
#mouse-scroll .wheel {height:5px;width:2px;display:block;margin:5px auto;background:#dddddd;position:relative}
#mouse-scroll .wheel {-webkit-animation:mouse-wheel 1.2s ease infinite;-moz-animation:mouse-wheel 1.2s ease infinite}
@-webkit-keyframes mouse-wheel {
0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100% {opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}
}
@-webkit-keyframes mouse-wheel {
0% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100% {opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}
}
