纯CSS3创意loading文字特效

 -webkit-animation-direction:alternate;
 -webkit-animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 
 }
 .cupcakeCore{
 align-self:center;
 -ms-align-self:center;
 height:25%;
 width:25%;
 background-color:#222;
 animation-name:coreAnimate;
 animation-duration:1s;
 animation-direction:alternate;
 animation-timing-function:ease-in-out;
 animation-iteration-count:infinite;
 -webkit-animation-name:coreAnimate;
 -webkit-animation-duration:1s;
 -webkit-animation-direction:alternate;
 -webkit-animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 }
 
 @-webkit-keyframes cupcakeAnimate{
 to{ height:90%; width:90%; }
 }
 @keyframes cupcakeAnimate{
 to{ height:90%; width:90%; }
 }
 
 @-webkit-keyframes coreAnimate{
 to{ height:90%; width:90%; }
 }
 @keyframes coreAnimate{
 to{ height:90%; width:90%; }
 }