/* Анимация клика по вариантам */
#crw-workbook .crw-control {
transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
#crw-workbook .crw-control:active {
transform: scale(.94);
}
#crw-workbook .crw-control[aria-pressed="true"] {
animation: crwSelect .28s ease;
}
#crw-workbook .crw-control[aria-pressed="true"] .crw-checkmark {
animation: crwCheck .3s cubic-bezier(.2,.8,.2,1);
}
/* Анимация результата */
#crw-workbook .crw-result.crw-result--show {
animation: crwResultShow .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes crwSelect {
0% {
transform: scale(1);
}
50% {
transform: scale(.92);
}
100% {
transform: scale(1);
}
}
@keyframes crwCheck {
0% {
opacity: 0;
transform: scale(.3) rotate(-15deg);
}
65% {
transform: scale(1.18) rotate(3deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0);
}
}
@keyframes crwResultShow {
0% {
opacity: 0;
transform: translateY(18px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
