css3 transition effect(其它效果)

2022-10-31 11:53:04

http://blog.csdn.net/jerryvon/article/details/8755548

整理了一些其它动画，用的模板为flip模板，只不过CSS3不同

  1. /***************** 淡入淡出 ********************/
  2. .effect5 .back {
  3. -webkit-transform: rotate3d(1,0,0,0);
  4. }
  5. .effect5.show .front{
  6. -webkit-animation: effect5Front 0.6s linear forwards;
  7. }
  8. @-webkit-keyframes effect5Front{
  9. 0% { opacity: 1; }
  10. 100% { opacity: 0; }
  11. }
  12. /***************** 向左边推入 ********************/
  13. .transition.effect6 { overflow: hidden; }
  14. .effect6.show .front,
  15. .effect6.show .back{
  16. -webkit-animation-duration: 0.4s;
  17. -webkit-animation-timing-function: ease-out;
  18. -webkit-animation-fill-mode: forwards;
  19. }
  20. .effect6.show .front{
  21. -webkit-animation-name: effect6Front;
  22. }
  23. .effect6.show .back {
  24. -webkit-animation-name: effect6Back;
  25. }
  26. @-webkit-keyframes effect6Front{
  27. 0% { -webkit-transform: translateX(0); }
  28. 100% { -webkit-transform: translateX(-100%); }
  29. }
  30. @-webkit-keyframes effect6Back{
  31. 0% { -webkit-transform: translateX(100%); }
  32. 100% { -webkit-transform: translateX(0px); }
  33. }
  34. /***************** 从某个角落盖上原来的图片 ********************/
  35. .effect7 .front{ z-index: 1; }
  36. .effect7 .back{ z-index: 2; }
  37. .effect7.show .back{
  38. -webkit-animation: effect7Back 0.4s ease-out forwards;
  39. }
  40. @-webkit-keyframes effect7Back{
  41. 0% { -webkit-transform: rotate(40deg) scale(1.5) translate(200px,10px); opacity: 0; }
  42. 100% { -webkit-transform: rotate(0deg) scale(1) translate(0,0); opacity: 1; }
  43. }
  44. /***************** 插扑克牌效果1 ********************/
  45. .effect8 .back {
  46. -webkit-transform: rotate3d(1,0,0,0);
  47. }
  48. .effect8 .front {
  49. z-index: 1;
  50. }
  51. .effect8 .back {
  52. z-index: 1;
  53. }
  54. .effect8.show .front{
  55. -webkit-animation: effect8Front 0.8s ease-in-out forwards;
  56. }
  57. @-webkit-keyframes effect8Front{
  58. 0% { -webkit-transform: translateX(0); z-index: 3;}
  59. 50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
  60. 51% { z-index: 1;}
  61. 100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
  62. }
  63. /***************** 插扑克牌效果2 ********************/
  64. .effect9 .back {
  65. -webkit-transform: rotate3d(1,0,0,0);
  66. }
  67. .effect9.show .front,
  68. .effect9.show .back{
  69. -webkit-animation-duration: 0.8s;
  70. -webkit-animation-timing-function: ease-in-out;
  71. -webkit-animation-fill-mode: forwards;
  72. -webkit-transform-origin: 0% 100%;
  73. }
  74. .effect9.show .front{
  75. -webkit-animation-name: effect9Front;
  76. }
  77. .effect9.show .back {
  78. -webkit-animation-name: effect9Back;
  79. }
  80. @-webkit-keyframes effect9Front{
  81. 0% { z-index: 3;}
  82. 50% { -webkit-transform: rotateZ(-75deg); z-index: 3;}
  83. 51% { z-index: 1;}
  84. 100% { -webkit-transform: rotateZ(0deg); z-index: 1;}
  85. }
  86. @-webkit-keyframes effect9Back{
  87. 0% { z-index: 1;}
  88. 50% { -webkit-transform: rotateZ(20deg); z-index: 1;}
  89. 51% { z-index: 3;}
  90. 100% { -webkit-transform: rotateZ(0deg); z-index: 3;}
  91. }
  92. /***************** 淡出效果2 ********************/
  93. .effect10 .back {
  94. -webkit-transform: rotate3d(1,0,0,0);
  95. }
  96. .effect10.show .front{
  97. -webkit-animation: effect10Front 0.4s ease-in-out forwards;
  98. }
  99. @-webkit-keyframes effect10Front{
  100. 0% { opacity:1; }
  101. 100% { -webkit-transform: rotateZ(3deg) scale(1.5); opacity:0; }
  102. }
  103. /***************** effect11 ********************/
  104. .effect11 .back {
  105. -webkit-transform: rotate3d(1,0,0,0);
  106. }
  107. .effect11.show .front{
  108. -webkit-transform-origin: 0% 100%;
  109. }
  110. .effect11.show .front{
  111. -webkit-animation: effect11Front 1s ease-in-out forwards;
  112. }
  113. @-webkit-keyframes effect11Front{
  114. 0% { z-index: 3; -webkit-animation-timing-function : ease-in }
  115. 20% { -webkit-transform: rotateZ(180deg); z-index: 3;-webkit-animation-timing-function : ease-out }
  116. 21% { z-index: 1; }
  117. 40% { -webkit-transform: rotateZ(370deg); z-index: 1; }
  118. 60% { -webkit-transform: rotateZ(356deg); z-index: 1; }
  119. 80% { -webkit-transform: rotateZ(360deg); z-index: 1; }
  120. 95% { -webkit-transform: rotateZ(359deg); z-index: 1; }
  121. 100% { -webkit-transform: rotateZ(360deg); z-index: 1; }
  122. }
  123. /***************** 中心点扩散显示(mask) ********************/
  124. .effect12 .back{
  125. -webkit-transform: rotate3d(1,0,0,0);
  126. }
  127. .effect12 .back {
  128. -webkit-mask-image: url(../../assets/circle-mask.png);
  129. -webkit-mask-repeat: no-repeat;
  130. -webkit-mask-position: 50% 50%;
  131. -webkit-mask-size: 1500px;
  132. -webkit-animation-duration: 1s;
  133. }
  134. .effect12.show .back{
  135. -webkit-animation-name: iris;
  136. z-index:3;
  137. }
  138. @-webkit-keyframes iris {
  139. 0% { -webkit-mask-size: 0; -webkit-animation-timing-function: ease-in-out; }
  140. 100% { -webkit-mask-size: 1500px; }
  141. }
 
 
上一篇：实现Bootstrap Carousel Fade Transition 淡入淡出效果


下一篇：前端js文件合并三种方式