CODEWITHSUNDEEP
htmlcssanimationscroll
Very Curious
Very Curious

Reputation: 891

CSS: Animating scroll button

I have this icon (png)

enter image description here

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!

Upvotes: 2

Views: 2197

Answers (2)

Rijosh k S
Rijosh k S

Reputation: 1

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)}
}

Upvotes: 0

Akshay
Akshay

Reputation: 14378

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;
}

Upvotes: 4

Related Questions