查看: 3631|回复: 0

[DIV/CSS] 《CSS动画实用技巧》课程手记

发表于 2018-2-13 08:00:02
概述

这是我学习CSS动画实用技巧的课程笔记

常用动画属性——transition

常用动画属性——transition

  1. .change img{
  2. display:block;
  3. width:300px;
  4. height:284px;
  5. opacity:0;
  6. -webkit-transform:translate(-100px,-100px);
  7. -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
  8. transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
  9. }
  10. .change:hover img{
  11. -webkit-transform:translate(0px,0px);
  12. opacity:1;
  13. -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
  14. transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
  15. }
复制代码

主要是移动和透明渐变同时进行(有延迟)。

常用动画属性——animation

常用动画属性——animation

  1. @keyframes shake-hard {
  2. 2% {
  3. transform: translate(1px, -2px) rotate(3.5deg); }
  4. 4% {
  5. transform: translate(-7px, -6px) rotate(3.5deg); }
  6. 6% {
  7. transform: translate(2px, -6px) rotate(-0.5deg); }
  8. 8% {
  9. transform: translate(1px, 2px) rotate(2.5deg); }
  10. 10% {
  11. transform: translate(1px, 7px) rotate(1.5deg); }
  12. 12% {
  13. transform: translate(0px, 2px) rotate(-0.5deg); }
  14. 14% {
  15. transform: translate(9px, 2px) rotate(1.5deg); }
  16. 16% {
  17. transform: translate(-4px, 2px) rotate(3.5deg); }
  18. 18% {
  19. transform: translate(-9px, 5px) rotate(1.5deg); }
  20. 20% {
  21. transform: translate(-9px, -8px) rotate(1.5deg); }
  22. 22% {
  23. transform: translate(-2px, 3px) rotate(-0.5deg); }
  24. 24% {
  25. transform: translate(3px, 2px) rotate(-2.5deg); }
  26. 26% {
  27. transform: translate(8px, -7px) rotate(2.5deg); }
  28. 28% {
  29. transform: translate(-7px, 9px) rotate(-2.5deg); }
  30. 30% {
  31. transform: translate(-9px, 3px) rotate(-0.5deg); }
  32. 32% {
  33. transform: translate(-7px, 2px) rotate(3.5deg); }
  34. 34% {
  35. transform: translate(-1px, -6px) rotate(0.5deg); }
  36. 36% {
  37. transform: translate(5px, -1px) rotate(3.5deg); }
  38. 38% {
  39. transform: translate(2px, 6px) rotate(3.5deg); }
  40. 40% {
  41. transform: translate(-4px, -2px) rotate(-1.5deg); }
  42. 42% {
  43. transform: translate(1px, -7px) rotate(-2.5deg); }
  44. 44% {
  45. transform: translate(6px, 7px) rotate(-1.5deg); }
  46. 46% {
  47. transform: translate(-3px, 6px) rotate(2.5deg); }
  48. 48% {
  49. transform: translate(-6px, 6px) rotate(2.5deg); }
  50. 50% {
  51. transform: translate(4px, -6px) rotate(1.5deg); }
  52. 52% {
  53. transform: translate(-8px, 9px) rotate(-2.5deg); }
  54. 54% {
  55. transform: translate(-7px, 5px) rotate(-0.5deg); }
  56. 56% {
  57. transform: translate(-4px, 9px) rotate(2.5deg); }
  58. 58% {
  59. transform: translate(-6px, -8px) rotate(-0.5deg); }
  60. 60% {
  61. transform: translate(6px, -9px) rotate(2.5deg); }
  62. 62% {
  63. transform: translate(2px, 9px) rotate(1.5deg); }
  64. 64% {
  65. transform: translate(7px, -7px) rotate(1.5deg); }
  66. 66% {
  67. transform: translate(1px, -3px) rotate(0.5deg); }
  68. 68% {
  69. transform: translate(9px, -2px) rotate(-0.5deg); }
  70. 70% {
  71. transform: translate(9px, -3px) rotate(-1.5deg); }
  72. 72% {
  73. transform: translate(2px, -3px) rotate(-0.5deg); }
  74. 74% {
  75. transform: translate(6px, -9px) rotate(1.5deg); }
  76. 76% {
  77. transform: translate(-3px, 6px) rotate(3.5deg); }
  78. 78% {
  79. transform: translate(1px, 8px) rotate(-0.5deg); }
  80. 80% {
  81. transform: translate(10px, -2px) rotate(1.5deg); }
  82. 82% {
  83. transform: translate(-5px, 5px) rotate(3.5deg); }
  84. 84% {
  85. transform: translate(7px, -5px) rotate(-0.5deg); }
  86. 86% {
  87. transform: translate(-3px, -7px) rotate(-0.5deg); }
  88. 88% {
  89. transform: translate(-2px, -1px) rotate(-1.5deg); }
  90. 90% {
  91. transform: translate(5px, 0px) rotate(-2.5deg); }
  92. 92% {
  93. transform: translate(10px, -5px) rotate(-0.5deg); }
  94. 94% {
  95. transform: translate(2px, 9px) rotate(0.5deg); }
  96. 96% {
  97. transform: translate(4px, -8px) rotate(0.5deg); }
  98. 98% {
  99. transform: translate(2px, 8px) rotate(-0.5deg); }
  100. 0%, 100% {
  101. transform: translate(0, 0) rotate(0); } }
复制代码

其实就是把抖动分隔成一帧帧,然后用keyframes连接起来。

常用动画属性——transform

常用动画属性——transform

  1. .cardfan > img{
  2. position:absolute;
  3. border:10px solid #fff;
  4. box-sizing:border-box;
  5. box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
  6. -webkit-transform-origin: center 400px;
  7. transform-origin: center 400px;
  8. -webkit-transition: -webkit-transform .7s ease;
  9. transition: transform .7s ease;
  10. }
  11. .cardfan img:first-child{
  12. -webkit-transform:rotate(5deg);
  13. transform:rotate(5deg);
  14. }
  15. .cardfan img:last-child{
  16. -webkit-transform:rotate(-5deg);
  17. transform:rotate(-5deg);
  18. }
  19. .cardfan:hover img:first-child{
  20. -webkit-transform:rotate(25deg);
  21. transform:rotate(25deg);
  22. }
  23. .cardfan:hover img:last-child{
  24. -webkit-transform:rotate(-25deg);
  25. transform:rotate(-25deg);
  26. }
复制代码

其实就是在鼠标接触之后第1,3张图旋转一下。

常用动画属性——animation-delay为负值

常用动画属性——animation-delay为负值

  1. .spinner > div{
  2. display:inline-block;
  3. width:6px;
  4. height:100%;
  5. background:green;
  6. -webkit-animation: strechdelay 1.2s infinite ease-in-out ;
  7. }
  8. .spinner .line2{
  9. -webkit-animation-delay:-1.1s;
  10. }
  11. .spinner .line3{
  12. -webkit-animation-delay:-1.0s;
  13. }
  14. .spinner .line4{
  15. -webkit-animation-delay:-0.9s;
  16. }
  17. .spinner .line5{
  18. -webkit-animation-delay:-0.8s;
  19. }/**/
  20. @-webkit-keyframes strechdelay{
  21. 0%,40%,100%{
  22. -webkit-transform:scaleY(.4);
  23. }
  24. 20%{
  25. -webkit-transform:scaleY(1);
  26. }
  27. }
复制代码

比如:animation-delay为-2s,效果是使动画马上开始,但跳过 2 秒进入动画。

常用动画属性——妙用border颜色

常用动画属性——妙用border颜色

  1. .spinner{
  2. width:10em;
  3. height:10em;
  4. border-radius:100%;
  5. margin:100px auto;
  6. border:1.1em solid rgba(255,255,255,.2);
  7. border-left-color:#fff;
  8. }
复制代码

主要是先让一个边框颜色不同,然后让它旋转。

常用动画属性——巧用border宽度

常用动画属性——妙用border宽度

  1. .image-layer:before {
  2. content: '';
  3. position: absolute;
  4. top: 0;
  5. right: 0;
  6. border-style: solid;
  7. border-width: 0;
  8. border-color: rgba(0,0,0,0.2) #fff;
  9. border-radius: 0 0 0 4px;
  10. box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  11. -webkit-transition: all 0.4s ease-out;
  12. transition:all 0.4s ease-out;
  13. }
  14. .image-layer:hover:before{
  15. border-right-width:80px;
  16. border-bottom-width:80px;
  17. }
  18. .paper-flip.folded .image-layer:before{
  19. border-right-width:1000px;
  20. border-bottom-width:600px;
  21. }
复制代码

利用宽度做成折角效果。翻页效果有点看不懂。

常用动画属性——实现运动动画

常用动画属性——实现运动动画

  1. .stage{
  2. width:120px;
  3. height:auto;
  4. margin:0 auto;
  5. position:relative;
  6. -webkit-transform-origin:center top;
  7. -webkit-transform:rotate(-30deg);
  8. -webkit-animation:sway 2.2s infinite alternate ease-in-out;
  9. }
  10. .watch{
  11. width:100%;
  12. height:auto;
  13. }
  14. .seconds{
  15. position:absolute;
  16. width:8%;
  17. height:auto;
  18. bottom:11.5%;
  19. left:45.5%;
  20. -webkit-transform-origin:center 72.4%;
  21. -webkit-animation:second 60s infinite linear;
  22. }
  23. @-webkit-keyframes second{
  24. to{
  25. -webkit-transform:rotate(355deg);
  26. }
  27. }
  28. @-webkit-keyframes sway{
  29. to{
  30. -webkit-transform:rotate(30deg);
  31. }
  32. }
复制代码

其实就是利用rotate来进行弧形运动,注意animation-direction:alternatecenter:top



回复

使用道具 举报