CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  animation-duration: 0.001s;
  -o-animation-duration: 0.001s;
  -ms-animation-duration: 0.001s;
  -moz-animation-duration: 0.001s;
  -webkit-animation-duration: 0.001s;
  
  @media screen and (min-width: 700px) {
    color: #09187a;
    
    animation-name: min-width-700px;
    -o-animation-name: min-width-700px;
    -ms-animation-name: min-width-700px;        
    -moz-animation-name: min-width-700px;
    -webkit-animation-name: min-width-700px;
  }
  
  @media screen and (min-width: 1000px) {
    color: #38c40a;
    
    animation-name: min-width-1000px;
    -o-animation-name: min-width-1000px;
    -ms-animation-name: min-width-1000px;        
    -moz-animation-name: min-width-1000px;
    -webkit-animation-name: min-width-1000px;
  }
}

@keyframes min-width-700px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }  
}

@-moz-keyframes min-width-700px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-webkit-keyframes min-width-700px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-ms-keyframes min-width-700px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-o-keyframes min-width-700px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@keyframes min-width-1000px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }  
}

@-moz-keyframes min-width-1000px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-webkit-keyframes min-width-1000px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-ms-keyframes min-width-1000px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}

@-o-keyframes min-width-1000px {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }
}


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

JS

            
              var animationEndEventNames = {
    'WebkitAnimation' : 'webkitAnimationEnd',
    'MozAnimation'    : 'animationend',
    'OAnimation'      : 'oAnimationEnd',
    'msAnimation'     : 'MSAnimationEnd',
    'animation'       : 'animationend'
};
var animationEnd = animationEndEventNames[ Modernizr.prefixed('animation') ];

document.addEventListener(animationEnd, dispatchEvent, false);

// check the animation name and operate accordingly
function dispatchEvent(event) {
  if (event.animationName === 'min-width-700px') {
    document.body.innerHTML = 'Min width is 700px';
  } else if (event.animationName === 'min-width-1000px') {
    document.body.innerHTML = 'Min width is 1000px';
  }
}

document.body.innerHTML = 'Resize';
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................