Guest User

Untitled

a guest
Jan 16th, 2018
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.07 KB | None | 0 0
  1. <div class="zakaz-form switch-form">Содержимое 1-го блока + 1-я кнопка</div>
  2. <div class="cons-form switch-form">Содержимое 2-го блока + 2-я кнопка</div>
  3.  
  4. .zakaz-form{
  5. animation: switch-zakaz forwards 3s;
  6. -webkit-animation-play-state:paused;
  7. animation-play-state:paused;
  8. }
  9. @keyframes switch-zakaz {
  10. 0% {
  11. opacity: 1;
  12. left: 0;
  13. }
  14. 20% {
  15. opacity: 1;
  16. left: 0;
  17. }
  18. 100% {
  19. opacity: 0;
  20. left: 95%;
  21. }
  22. }
  23.  
  24. .cons-form{
  25. animation: switch-cons forwards 3s;
  26. -webkit-animation-play-state:paused;
  27. animation-play-state:paused;
  28. }
  29. @keyframes switch-cons {
  30. 0% {
  31. opacity: 0;
  32. left: -1000px;
  33. }
  34. 80% {
  35. opacity: 1;
  36. left: calc(50% - 275px);
  37. }
  38. 100% {
  39. opacity: 1;
  40. left: calc(50% - 275px);
  41. }
  42. }
  43.  
  44. .start-anim {
  45. -webkit-animation-play-state:running;
  46. animation-play-state:running;
  47. }
  48.  
  49. jQuery(document).ready(function($){
  50. $(function(){
  51. $('.cons-button').click(function(){
  52. $('.switch-form').toggleClass('start-anim');
  53. });
  54. });
  55. });
Add Comment
Please, Sign In to add comment