JSON SORT REVERSE JQUERY Animated with CSS3 only

JSON SORT REVERSE JQUERY Animated with CSS3 only Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="dental">

CSS

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(.5);}
  21.25% {opacity:1; -webkit-transform:scale(1.05);}
  25% {-webkit-transform:scale(1); }
}

.dental li {  margin: 20px; -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.dental li:nth-child(1){ -webkit-animation-delay: .5s }
.dental li:nth-child(2){ -webkit-animation-delay: 1s }
.dental li:nth-child(3){ -webkit-animation-delay: 1.5s }
.dental li:nth-child(4){ -webkit-animation-delay: 2s }
.dental li:nth-child(5){ -webkit-animation-delay: 2.5s }
.dental li:nth-child(6){ -webkit-animation-delay: 3s }

.dental li {
list-style:none;
 position: relative;
}

.dental li:before {
  content: '\f005'; 
  font-family: FontAwesome; 
  display: inline-block;
  width: 1.2em; 
  margin-left: -1.2em;
    color:gold
}

JavaScript

var json = '[{"id":"2","tagName":"Dental"},{"id":"1","tagName":"Prophy"},{"id":"3","tagName":"Keychain"},{"id":"4","tagName":"Pliers"},{"id":"5","tagName":"Molar"}]';
 
 function sortJsonName(a,b){
	    return a.tagName.toLowerCase() < b.tagName.toLowerCase() ? 1 : -1;
	};

 $.each(JSON.parse(json).sort(sortJsonName), function (idx, obj) {
    function(){$(".dental").append("<li>"+obj.tagName+"</li>");
});


//or 

/*$.each($.parseJSON(json), function (idx, obj) {
//$.each($.parseJSON(json).sort().reverse(), function (idx, obj) {
    $(".dental").append("<li>"+obj.id+"</li>");
 
});*/