SidePanelButton.php.style-anim-close-btn.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. /* Animated close btn: p5-side_panel__close */
  2. .p5-side_panel__close:hover::before, .p5-side_panel__close:hover::after {
  3. -webkit-transition: -webkit-transform 0.3s;
  4. transition: -webkit-transform 0.3s;
  5. transition: transform 0.3s;
  6. transition: transform 0.3s, -webkit-transform 0.3s;
  7. }
  8. .p5-side_panel__close:hover::before {
  9. -webkit-transform: rotate(220deg);
  10. -ms-transform: rotate(220deg);
  11. transform: rotate(220deg);
  12. }
  13. .p5-side_panel__close:hover::after {
  14. -webkit-transform: rotate(135deg);
  15. -ms-transform: rotate(135deg);
  16. transform: rotate(135deg);
  17. }
  18. .p5-side_panel--is-visible .p5-side_panel__close::before {
  19. -webkit-animation: cd-close-1 0.6s 0.3s;
  20. animation: cd-close-1 0.6s 0.3s;
  21. }
  22. .p5-side_panel--is-visible .p5-side_panel__close::after {
  23. -webkit-animation: cd-close-2 0.6s 0.3s;
  24. animation: cd-close-2 0.6s 0.3s;
  25. }
  26. @-webkit-keyframes cd-close-1 {
  27. 0%, 50% {
  28. -webkit-transform: rotate(0deg);
  29. transform: rotate(0deg);
  30. }
  31. 100% {
  32. -webkit-transform: rotate(45deg);
  33. transform: rotate(45deg);
  34. }
  35. }
  36. @keyframes cd-close-1 {
  37. 0%, 50% {
  38. -webkit-transform: rotate(0deg);
  39. transform: rotate(0deg);
  40. }
  41. 100% {
  42. -webkit-transform: rotate(45deg);
  43. transform: rotate(45deg);
  44. }
  45. }
  46. @-webkit-keyframes cd-close-2 {
  47. 0%, 50% {
  48. -webkit-transform: rotate(0deg);
  49. transform: rotate(0deg);
  50. }
  51. 100% {
  52. -webkit-transform: rotate(-45deg);
  53. transform: rotate(-45deg);
  54. }
  55. }
  56. @keyframes cd-close-2 {
  57. 0%, 50% {
  58. -webkit-transform: rotate(0deg);
  59. transform: rotate(0deg);
  60. }
  61. 100% {
  62. -webkit-transform: rotate(-45deg);
  63. transform: rotate(-45deg);
  64. }
  65. }