Rotation in CSS3, from circle to square
CSS
body {
background: azure;
}
div {
position: absolute !important;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
background-color: coral;
animation: transformieren 2s infinite alternate;
}
@keyframes transformieren {
0% {
border-radius: 0 0 0 0;
background: coral;
transform: rotate(0deg);
}
25% {
border-radius: 50% 0 0 0;
background: darksalmon;
transform: rotate(45deg);
}
50% {
border-radius: 50% 50% 0 0;
background:indianred;
transform: rotate(90deg);
}
75% {
border-radius: 50% 50% 50% 0;
background: lightcoral;
transform: rotate(135deg);
}
100% {
border-radius: 50%;
background: darksalmon;
transform: rotate(180deg);
}
}
3 Responses
Thx! Really awesome animation!