经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css3 animation动画,你会用了吗?-2 -cyy
来源:cnblogs  作者:陈莺莺呀  时间:2020/11/16 10:07:59  对本文有异议

延迟属性与帧延迟效果对比:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. div{
  25. width:100px;
  26. height:100px;
  27. background:#ff893b;
  28. animation-name:scale;
  29. animation-duration:1s;
  30. animation-delay:2s;
  31. animation-iteration-count:infinite;
  32. }
  33. @keyframes scale{
  34. to{
  35. transform:scale(3);
  36. }
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div></div>
  42. </body>
  43. </html>

 

微场景页面布局:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:grid;
  20. grid-template-rows:10vh 1fr 10vh;
  21. }
  22. header{
  23. background:#ffeb3b;
  24. display:flex;
  25. justify-content:center;
  26. align-items:center;
  27. animation-name:translate;
  28. animation-duration:.5s;
  29. }
  30. main{
  31. background:#abcdef;
  32. display:flex;
  33. flex-direction:column;
  34. justify-content:center;
  35. align-items:center;
  36. animation-name:rotate;
  37. animation-duration:.5s;
  38. animation-delay:1s;
  39. animation-fill-mode:backwards;
  40. }
  41. div{
  42. border-radius:10px;
  43. padding:10px;
  44. width:80%;
  45. opacity:.8;
  46. box-shadow:0 0 10px rgba(0,0,0,.5);
  47. color:white;
  48. }
  49. div:nth-child(1){
  50. transform:translateY(-50px);
  51. background:#7b8422;
  52. }
  53. div:nth-child(2){
  54. background:indianred;
  55. }
  56. footer{
  57. background:#878681;
  58. display:flex;
  59. justify-content:center;
  60. align-items:center;
  61. animation-name:rotate;
  62. animation-duration:.5s;
  63. animation-delay:.5s;
  64. animation-fill-mode:backwards;
  65. }
  66. .opacity{
  67. animation-name:opacity;
  68. animation-duration:.5s;
  69. animation-fill-mode:backwards;
  70. }
  71. .s1-5{
  72. animation-delay:1.5s;
  73. }
  74. .s2{
  75. animation-delay:2s;
  76. }
  77. @keyframes translate{
  78. from{
  79. transform:translateX(-100vw);
  80. }
  81. to{
  82. transform:translateX(0);
  83. }
  84. }
  85. @keyframes rotate{
  86. from{
  87. transform:scale(0) rotate(360deg);
  88. }
  89. to{
  90. transform:scale(1) rotate(0deg);
  91. }
  92. }
  93. @keyframes opacity{
  94. from{
  95. opacity:0;
  96. }
  97. to{
  98. opacity:1;
  99. }
  100. }
  101. </style>
  102. </head>
  103. <body>
  104. <header>header</header>
  105. <main>main
  106. <div class="opacity s1-5">我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境。同时,我们也提供开源库源接入的入口,让所有人都可以提交开源库,包括 JavaScript、CSS、图片和 swf 等静态文件。</div>
  107. <div class="opacity s2">我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境。同时,我们也提供开源库源接入的入口,让所有人都可以提交开源库,包括 JavaScript、CSS、图片和 swf 等静态文件。</div>
  108. </main>
  109. <footer>footer</footer>
  110. </body>
  111. </html>

 

也可以使用动画库:swiper  animate.css

 

贝塞尔曲线控制动画速率:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. background:#57596a;
  20. display:grid;
  21. /* 栅格定义一行一列 */
  22. grid-template:1fr/1fr;
  23. }
  24. ul{
  25. display:grid;
  26. /* 栅格定义一行五列 */
  27. grid-template:1fr/repeat(6,1fr);
  28. list-style:none;
  29. gap:10px;
  30. }
  31. li{
  32. background:orange;
  33. height:10vh;
  34. animation-name:translate;
  35. animation-duration:2s;
  36. animation-iteration-count:infinite;
  37. }
  38. li:nth-child(1){
  39. animation-timing-function:ease;
  40. }
  41. li:nth-child(2){
  42. animation-timing-function:ease-in;
  43. }
  44. li:nth-child(3){
  45. animation-timing-function:ease-out;
  46. }
  47. li:nth-child(4){
  48. animation-timing-function:ease-in-out;
  49. }
  50. li:nth-child(5){
  51. animation-timing-function:linear;
  52. }
  53. li:nth-child(6){
  54. animation-timing-function:cubic-bezier(.17,.67,.92,.1);
  55. }
  56. @keyframes translate{
  57. to{
  58. transform:translateY(90vh);
  59. }
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <ul>
  65. <li>ease</li>
  66. <li>ease-in</li>
  67. <li>ease-out</li>
  68. <li>ease-in-out</li>
  69. <li>linear</li>
  70. <li>cubic-bezier</li>
  71. </ul>
  72. </body>
  73. </html>

 

修改关键帧速率制作弹跳球:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. background-color: #34495e;
  20. /* 栅格,一行五列 */
  21. display:grid;
  22. grid-template:1fr/repeat(5,1fr);
  23. }
  24. div{
  25. /* 栅格列的定位 */
  26. grid-column:3/4;
  27. justify-self:center;
  28. background:orange;
  29. height:50px;
  30. width:50px;
  31. border-radius:50%;
  32. animation-name:move;
  33. animation-duration:4s;
  34. animation-iteration-count:infinite;
  35. animation-fill-mode:forwards;
  36. }
  37. @keyframes move{
  38. /* 向上弹的帧 */
  39. 0%{
  40. transform:translateY(0vh);
  41. }
  42. 30%{
  43. transform:translateY(10vh);
  44. }
  45. 60%{
  46. transform:translateY(40vh);
  47. }
  48. 80%{
  49. transform:translateY(60vh);
  50. }
  51. 95%{
  52. transform:translateY(75vh);
  53. }
  54. 0%,30%,60%,80%,95%{
  55. animation-timing-function:ease-in;
  56. }
  57. /* 向下落的帧 */
  58. 15%,45%,75%,85%,100%{
  59. transform:translateY(90vh);
  60. animation-timing-function:ease-out;
  61. }
  62. }
  63. </style>
  64. </head>
  65. <body>
  66. <div></div>
  67. </body>
  68. </html>

 

盒阴影偏移技巧与currentColor特性:

currentColor 指当前定义的color的颜色

 

提交按钮加载动画效果:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:grid;
  20. grid-template:1fr/1fr;
  21. }
  22. button{
  23. align-self:center;
  24. justify-self:center;
  25. background:#f3f3f3;
  26. height:50px;
  27. width:200px;
  28. color:#4e505f;
  29. border:1px solid #ddd;
  30. }
  31. button::after{
  32. content:'';
  33. width:3px;
  34. height:3px;
  35. display:inline-block; /*块元素才能加阴影*/
  36. box-shadow:3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
  37. animation-name:hd;
  38. animation-duration:1s;
  39. animation-iteration-count:infinite;
  40. }
  41. @keyframes hd{
  42. from{
  43. box-shadow:none;
  44. }
  45. 30%{
  46. box-shadow:3px 0 0 currentColor;
  47. }
  48. 60%{
  49. box-shadow:3px 0 0 currentColor,9px 0 0 currentColor;
  50. }
  51. 90%{
  52. box-shadow:3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
  53. }
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <button>提交</button>
  59. </body>
  60. </html>

 

steps步进动画规则详解:

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. main{
  22. width:400px;
  23. height:200px;
  24. background:red;
  25. justify-self:center;
  26. align-self:center;
  27. display:grid;
  28. grid-template:repeat(2,1fr)/repeat(4,1fr);
  29. }
  30. div{
  31. text-align:center;
  32. background:#ffeb3b;
  33. border:1px solid #01547a;
  34. box-sizing:border-box;
  35. position:relative;
  36. }
  37. div:nth-child(1)::before{
  38. content:'START';
  39. width:100px;
  40. height:100px;
  41. background:pink;
  42. position:absolute;
  43. top:0;
  44. left:0;
  45. animation-timing-function:steps(4,start);
  46. }
  47. div:nth-child(5)::before{
  48. content:'END';
  49. width:100px;
  50. height:100px;
  51. background:lightgreen;
  52. position:absolute;
  53. top:0;
  54. left:0;
  55. animation-timing-function:steps(4,end);
  56. }
  57. div:nth-child(1)::before,
  58. div:nth-child(5)::before{
  59. animation-name:hd;
  60. animation-duration:2s;
  61. animation-iteration-count:infinite;
  62. z-index:2;
  63. }
  64. @keyframes hd{
  65. to{
  66. transform:translateX(400px);
  67. }
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <main>
  73. <div>1</div>
  74. <div>2</div>
  75. <div>3</div>
  76. <div>4</div>
  77. <div>5</div>
  78. <div>6</div>
  79. <div>7</div>
  80. <div>8</div>
  81. </main>
  82. </body>
  83. </html>

 

step-start与step-end单步处理:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. main{
  22. width:400px;
  23. height:200px;
  24. background:red;
  25. justify-self:center;
  26. align-self:center;
  27. display:grid;
  28. grid-template:repeat(2,1fr)/repeat(4,1fr);
  29. }
  30. div{
  31. text-align:center;
  32. background:#ffeb3b;
  33. border:1px solid #01547a;
  34. box-sizing:border-box;
  35. position:relative;
  36. }
  37. div:nth-child(1)::before{
  38. content:'START';
  39. width:100px;
  40. height:100px;
  41. background:pink;
  42. position:absolute;
  43. top:0;
  44. left:0;
  45. animation-timing-function:steps(1,start);
  46. animation-timing-function:step-start;
  47. }
  48. div:nth-child(5)::before{
  49. content:'END';
  50. width:100px;
  51. height:100px;
  52. background:lightgreen;
  53. position:absolute;
  54. top:0;
  55. left:0;
  56. animation-timing-function:steps(1,end);
  57. animation-timing-function:step-end;
  58. }
  59. div:nth-child(1)::before,
  60. div:nth-child(5)::before{
  61. animation-name:hd;
  62. animation-duration:2s;
  63. animation-iteration-count:infinite;
  64. z-index:2;
  65. }
  66. @keyframes hd{
  67. 50%{
  68. transform:translateX(100px);
  69. }
  70. to{
  71. transform:translateX(0);
  72. }
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <main>
  78. <div>1</div>
  79. <div>2</div>
  80. <div>3</div>
  81. <div>4</div>
  82. <div>5</div>
  83. <div>6</div>
  84. <div>7</div>
  85. <div>8</div>
  86. </main>
  87. </body>
  88. </html>

 

animation-play-state 控制动画播放与暂停:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. main{
  22. width:400px;
  23. height:200px;
  24. background:red;
  25. justify-self:center;
  26. align-self:center;
  27. display:grid;
  28. grid-template:repeat(2,1fr)/repeat(4,1fr);
  29. }
  30. div{
  31. text-align:center;
  32. background:#ffeb3b;
  33. border:1px solid #01547a;
  34. box-sizing:border-box;
  35. position:relative;
  36. }
  37. div:nth-child(1)::before{
  38. content:'START';
  39. width:100px;
  40. height:100px;
  41. background:pink;
  42. position:absolute;
  43. top:0;
  44. left:0;
  45. animation-timing-function:steps(4,start);
  46. }
  47. div:nth-child(5)::before{
  48. content:'END';
  49. width:100px;
  50. height:100px;
  51. background:lightgreen;
  52. position:absolute;
  53. top:0;
  54. left:0;
  55. animation-timing-function:steps(4,end);
  56. }
  57. div:nth-child(1)::before,
  58. div:nth-child(5)::before{
  59. animation-name:hd;
  60. animation-duration:2s;
  61. animation-iteration-count:infinite;
  62. z-index:2;
  63. animation-play-state:paused;
  64. }
  65. main:hover div::before{
  66. animation-play-state:running;
  67. }
  68. @keyframes hd{
  69. to{
  70. transform:translateX(400px);
  71. }
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <main>
  77. <div>1</div>
  78. <div>2</div>
  79. <div>3</div>
  80. <div>4</div>
  81. <div>5</div>
  82. <div>6</div>
  83. <div>7</div>
  84. <div>8</div>
  85. </main>
  86. </body>
  87. </html>

 

纯css3的网站轮换图:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. main{
  22. width:400px;
  23. height:200px;
  24. justify-self:center;
  25. align-self:center;
  26. overflow:hidden;
  27. position:relative;
  28. }
  29. section{
  30. width:1600px;
  31. height:200px;
  32. display:grid;
  33. grid-template:1fr/repeat(4,400px);
  34. animation-name:slide;
  35. animation-duration:4s;
  36. animation-timing-function:steps(4,end);
  37. animation-iteration-count:infinite;
  38. }
  39. section:hover,
  40. section:hover+ul::after{
  41. /* 鼠标移入时轮播图暂停 */
  42. animation-play-state:paused;
  43. }
  44. div{
  45. overflow:hidden;
  46. }
  47. img{
  48. width:100%;
  49. }
  50. @keyframes slide{
  51. to{
  52. transform:translateX(-1600px);
  53. }
  54. }
  55. @keyframes num{
  56. to{
  57. transform:translateX(200px);
  58. }
  59. }
  60. ul{
  61. position:absolute;
  62. left:50%;
  63. bottom:20px;
  64. transform:translateX(-50%);
  65. display:grid;
  66. grid-template:1fr/repeat(4,1fr);
  67. list-style:none;
  68. width:200px;
  69. justify-items:center;
  70. }
  71. ul::after{
  72. content:'';
  73. position:absolute;
  74. left:10px;
  75. background:#f44336;
  76. top:0;
  77. width:30px;
  78. height:30px;
  79. border-radius:50%;
  80. z-index:-1;
  81. animation-name:num;
  82. animation-duration:4s;
  83. animation-timing-function:steps(4,end);
  84. animation-iteration-count:infinite;
  85. }
  86. li{
  87. width:30px;
  88. height:30px;
  89. border-radius:50%;
  90. background:rgba(0,0,0,.5);
  91. display:grid;
  92. justify-items:center;
  93. align-items:center;
  94. color:white;
  95. }
  96.  
  97. </style>
  98. </head>
  99. <body>
  100. <main>
  101. <section>
  102. <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196795432&di=c5722991665c7cbecde51004044a3480&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144517_nXCSe.thumb.400_0.jpeg" alt=""></div>
  103. <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1352056604,3886928601&fm=26&gp=0.jpg" alt=""></div>
  104. <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196816727&di=0fe20015abb70cebcb629469edb2ce00&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F11%2F20200211120916_SXQzf.thumb.400_0.jpeg" alt=""></div>
  105. <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196847395&di=484b7f335e5359c649c7ce0c815e95d5&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F27%2F20200227181512_vtype.thumb.400_0.jpeg" alt=""></div>
  106. </section>
  107. <ul>
  108. <li>1</li>
  109. <li>2</li>
  110. <li>3</li>
  111. <li>4</li>
  112. </ul>
  113. </main>
  114. </body>
  115. </html>

 

animation-fill-mode 动画填充模式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. ul{
  22. list-style:none;
  23. width:400px;
  24. height:100px;
  25. justify-self:center;
  26. align-self:center;
  27. display:grid;
  28. grid-template:1fr/repeat(4,1fr);
  29. }
  30. li{
  31. width:100px;
  32. height:100px;
  33. background:orange;
  34. border-radius:50%;
  35. display:grid;
  36. justify-items:center;
  37. align-items:center;
  38. animation-name:hd;
  39. animation-duration:2s;
  40. animation-delay:2s;
  41. }
  42. li:nth-child(1){
  43. /* 延迟过程中使用元素默认的效果,结束之后回到默认的效果 */
  44. animation-fill-mode:normal;
  45. }
  46. li:nth-child(2){
  47. /* 延迟过程中使用起始帧的效果,结束之后回到默认的效果 */
  48. animation-fill-mode:backwards;
  49. }
  50. li:nth-child(3){
  51. /* 延迟过程中使用元素默认的效果,结束之后回到结束帧 */
  52. animation-fill-mode:forwards;
  53. }
  54. li:nth-child(4){
  55. /* 延迟过程中使用起始帧的效果,结束之后回到结束帧 */
  56. animation-fill-mode:both;
  57. }
  58. @keyframes hd{
  59. from{
  60. transform:scale(0);
  61. }
  62. to{
  63. transform:scale(1);
  64. background:lightblue;
  65. }
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <ul>
  71. <li>normal</li>
  72. <li>backwards</li>
  73. <li>forwards</li>
  74. <li>both</li>
  75. </ul>
  76. </body>
  77. </html>

 

animation动画组合定义语法:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8. <style>
  9. *{
  10. margin:0;
  11. padding:0;
  12. box-sizing:border-box;
  13. list-style:none;
  14. }
  15. body{
  16. width:100vw;
  17. height:100vh;
  18. display:grid;
  19. background:#01547a;
  20. }
  21. ul{
  22. list-style:none;
  23. width:400px;
  24. height:100px;
  25. justify-self:center;
  26. align-self:center;
  27. display:grid;
  28. grid-template:1fr/repeat(4,1fr);
  29. }
  30. li{
  31. width:100px;
  32. height:100px;
  33. background:orange;
  34. border-radius:50%;
  35. display:grid;
  36. justify-items:center;
  37. align-items:center;
  38. }
  39. li:nth-child(1){
  40. /* 延迟过程中使用元素默认的效果,结束之后回到默认的效果 */
  41. animation:hd normal 2s 2s;
  42. }
  43. li:nth-child(2){
  44. /* 延迟过程中使用起始帧的效果,结束之后回到默认的效果 */
  45. animation:hd backwards 2s 2s;
  46. }
  47. li:nth-child(3){
  48. /* 延迟过程中使用元素默认的效果,结束之后回到结束帧 */
  49. animation:hd forwards 2s 2s;
  50. }
  51. li:nth-child(4){
  52. /* 延迟过程中使用起始帧的效果,结束之后回到结束帧 */
  53. animation:hd both 2s 2s;
  54. }
  55. @keyframes hd{
  56. from{
  57. transform:scale(0);
  58. }
  59. to{
  60. transform:scale(1);
  61. background:lightblue;
  62. }
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <ul>
  68. <li>normal</li>
  69. <li>backwards</li>
  70. <li>forwards</li>
  71. <li>both</li>
  72. </ul>
  73. </body>
  74. </html>

 

原文链接:http://www.cnblogs.com/chenyingying0/p/13964792.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号