123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- /* Animated close btn: p5-side_panel__close */
- .p5-side_panel__close:hover::before, .p5-side_panel__close:hover::after {
- -webkit-transition: -webkit-transform 0.3s;
- transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
- transition: transform 0.3s, -webkit-transform 0.3s;
- }
- .p5-side_panel__close:hover::before {
- -webkit-transform: rotate(220deg);
- -ms-transform: rotate(220deg);
- transform: rotate(220deg);
- }
- .p5-side_panel__close:hover::after {
- -webkit-transform: rotate(135deg);
- -ms-transform: rotate(135deg);
- transform: rotate(135deg);
- }
- .p5-side_panel--is-visible .p5-side_panel__close::before {
- -webkit-animation: cd-close-1 0.6s 0.3s;
- animation: cd-close-1 0.6s 0.3s;
- }
- .p5-side_panel--is-visible .p5-side_panel__close::after {
- -webkit-animation: cd-close-2 0.6s 0.3s;
- animation: cd-close-2 0.6s 0.3s;
- }
- @-webkit-keyframes cd-close-1 {
- 0%, 50% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- }
- @keyframes cd-close-1 {
- 0%, 50% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- }
- @-webkit-keyframes cd-close-2 {
- 0%, 50% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- }
- @keyframes cd-close-2 {
- 0%, 50% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- }
|