Animate and Transition

dabblet.css

/**
 * Animate and Transition
 */
 
 @-webkit-keyframes move{
 0%{height:200px;width:200px;}
 50%{height:300px;width:300px;}
 }

div{
position:relative;
display:block;
height:200px;
width:200px;
background:#ff6;
animation-name:'move';
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
transition:background .3s linear;
}

div:hover{
background:#ff6600;
}

p{
text-align:center;
font-family:sans-serif;
font-weight:600;
padding-top:90px
}

dabblet.html

<div><p>Some Text</p></div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}