Flowers

лепестки вращаются

by Vladislav Altyncev

HTML

<ul id="flowers">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

#flowers * { box-sizing: border-box; }
#flowers:after {content:""; display:table; clear:both;}
#flowers {width: 200px; margin: 5px 0 0; padding: 0; position: relative; list-style: none;}
#flowers li {
	width:100px; 
	height:100px; 
	position:relative; 
	float:left; 
	-webkit-animation-name: 'rota';
	-moz-animation-name: 'rota';
	-ms-animation-name: 'rota';
	-o-animation-name: 'rota';
	animation-name: 'rota';
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-ms-animation-duration: 3s;
	-o-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
#flowers li:nth-child(1) {
	border-radius: 0 50% 50% 50%; 
	background: rgba(253, 163, 66 ,0.5); 
	top: 15px; 
	left: 15px; 
	box-shadow: inset 0 0 15px #f8790e, 0 0 15px rgba(255,255,255,0.2);}
#flowers li:nth-child(2) {
	border-radius: 50% 0 50% 50%;
	background: rgba(179, 248, 12, 0.5);
	right: 15px;
	top: 15px;
	box-shadow: inset 0 0 15px #f7b809, 0 0 15px rgba(255,255,255,0.2);
}
#flowers li:nth-child(3) {
	border-radius: 50% 50% 50% 0;
	background: rgba(253, 112, 191, 0.5);
	left: 15px;
	bottom: 15px;
	box-shadow: inset 0 0 15px #f7438a, 0 0 15px rgba(255,255,255,0.2);
}
#flowers li:nth-child(4) {
	border-radius: 50% 50% 0 50%;
	background: rgba(32, 205, 237, 0.5);
	right: 15px;
	bottom: 15px;
	box-shadow: inset 0 0 15px #0ca2ef, 0 0 15px rgba(255,255,255,0.2);
}
@keyframes 'rota' {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
  ...