CodePen

HTML

            
              <div id="icons">
  <i class="cloud"></i>
  <i class="apple"></i>
  <i class="robot"></i>
</div>

<p id="help">Keep pressed to see <strong>looped</strong> animation.</p>
            
          
!

CSS

            
              
/* Animated Icons using SVG with CSS masks */

/* Cloud ---------------------------- */

i.cloud::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-linear-gradient(-45deg, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,.15) 50%, hsla(0,0%,100%,0) 50% );
    }

i.cloud {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-cloud_2.svg); /* Fallback */
    background-position: 0 center, 25% 0%;
    background-image: -webkit-radial-gradient( 50% 40%, 80% 60%, 
                        hsla(0,0%,100%,.3), hsla(0,0%,100%,0) 50%, hsla(0,0%,0%,.8) ),
                        url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-whirl.jpg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-cloud_2.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-cloud_2.svg);
    mask-position: 0 0, -100px 30px;
    mask-composite: source-out;
    transition: mask-position .4s cubic-bezier(.65, .06, 1, .42);
    }

i.cloud:hover {
    mask-position: 0 0, -100px 0px;
    transition: mask-position .3s cubic-bezier(0, .40, .20, 1);    
    }

i.cloud:active {
    mask-composite: xor;
    mask-position: 0 0, -100px -100px;
    transition: mask-position .4s cubic-bezier(.65, .06, 1, .42);    
    animation: cloud-active 1s .4s cubic-bezier(0, .80, 1, .20) infinite;
    }
    @keyframes cloud-active {
          0% { mask-position: 0 0, -100px 30px; }
        100% { mask-position: 0 0, -100px -100px; }
    }



/* Apple ---------------------------- */

i.apple {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-apple.svg); /* Fallback */
    background-size: auto, 100px 65px, auto;
    background-position: 0 center, center;
    background-image: -webkit-radial-gradient( 50% 40%, 80% 60%, 
                          hsla(0,0%,100%,.5), hsla(0,0%,100%,0) 30%, hsla(0,0%,0%,0) 30%, hsla(0,0%,0%,0) ),
                          linear-gradient( hsla(100,100%,60%,.5) 35%, 
                                           hsla( 50,100%,60%,.5) 35%,
                                           hsla( 50,100%,60%,.5) 47%,
                                           hsla( 30,100%,60%,.5) 47%, 
                                           hsla( 30,100%,60%,.5) 59%,
                                           hsla(  0,100%,60%,.5) 59%, 
                                           hsla(  0,100%,60%,.5) 71%,
                                           hsla(300,100%,60%,.5) 71%,
                                           hsla(300,100%,60%,.5) 83%,
                                           hsla(210,100%,60%,.5) 83% ),
                        url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-wood.jpg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-apple.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-apple.svg);
    mask-position: 0 0, -60px 0px;
    mask-composite: source-out;    
    transition: mask-position .4s cubic-bezier(.44, .08, .10, 1);
    }

i.apple:hover {
    mask-position: 0 0, -100px 0px;
    transition: mask-position .2s cubic-bezier(.44, .08, .10, 1);
    }

i.apple:active {
    mask-position: 0 0, -106px 0px;
    animation: apple-active .6s linear infinite;   
    }
    @keyframes apple-active {
          0% { background-position: 0 center, center      0, 50% 34%; }
        100% { background-position: 0 center, center -65px, 50% 34%; }
    }



/* Robot ---------------------------- */

i.robot {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-robot.svg); /* Fallback */
    background-position: 0 center, center;
    background-image: -webkit-radial-gradient( 50% 50%, 60% 80%, 
                        hsla(0,100%,50%,.7), hsla(0,100%,20%,.8) 60%, hsla(0,100%,10%,1) ),
                        url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-metal.jpg);
    mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-robot.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-robot.svg);
    mask-position: 0 0, -100px 13px;
    mask-composite: source-over;
    transition: mask-position .3s cubic-bezier(.65, .06, 1, .42);
    }
    
i.robot:hover {
    mask-position: 0 0, -100px 0px;
    transition: mask-position .2s cubic-bezier(0, .40, .20, 1); 
    }

i.robot:active {
    mask-position: 0 0, -107px 0px;
    transition: mask-position .1s cubic-bezier(.44, .08, .10, 1);    
    animation: robot-active .1s .2s cubic-bezier(.70, 0, .30, 1) infinite alternate;   
    }
    @keyframes robot-active {
          0% { mask-position: 0 0, -107px 0px; }
        100% { mask-position: 0 0, -93px 0px; }
    }



/* Global Icons styles ---------------------------- */

i {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  cursor: pointer;
  filter: drop-shadow( 0  1px  1px hsla(0,0%,100%,.5) )
          drop-shadow( 0 -6px  6px hsla(0,0%,100%,.5) ) 
          drop-shadow( 0 10px 10px hsla(0,0%,  0%,.3) );   
  mask-repeat: no-repeat;
  }

i:active {
  transform: translateY(2px);
  filter: drop-shadow( 0  1px  1px hsla(0,0%,100%,.5) )
                  drop-shadow( 0 -3px  6px hsla(0,0%,100%,.5) ) 
                  drop-shadow( 0  5px 10px hsla(0,0%,  0%,.3));
  }


/* General stuff ----------------------------- */

html {
  height: 100%;
	font:62.5%/1 "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	background: #f0f0f0;
  background-size: 75px;
  }

body {
	margin: 0;
	width: 100%;
	height: 100%;
  text-align: center;
    
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;        
	-webkit-box-orient: vertical;
	        flex-direction: column;
	}

#icons {
  user-select: none;
  border-radius: 50px;
  padding: 0 20px;
  margin: 0 40px;
  background-color: hsla(0,0%,0%,.02);
  box-shadow: inset 0 1px 4px hsla(0,0%,0%,.1), 0 1px 2px hsla(0,0%,100%,.3);
  }

#help {
  color: #aaa;
  margin-top: 20px;
  font-size: 1.1rem;
  }

#help strong {
  color: #777;
  }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................