1.animation动画

（1）定义场景

  4. 基本语法
  5. @keyframes 场景名称 {
  6. from{
  7. 样式名:值;
  8. ……
  9. }
  10. to{
  11. 样式名:值;
  12. ……
  13. }
  14. }
  15. 说明
  16. from 设置动画开始之前的样式。
  17. to 设置动画结束之后的样式。
  20. 或
  21. @keyframes 场景名称 {
  22. 0%{
  23. 样式名:值;
  24. ……
  25. }
  26. 50%{
  27. 样式名:值;
  28. ……
  29. }
  30. 100%{
  31. 样式名:值;
  32. ……
  33. }
  34. }
  35. 说明
  37. 0% 设置动画开始之前的样式。
  38. 50% 设置动画进行一半时的样式。
  39. 100% 设置动画结束后的样式。

（2）定义动画

  1. 基本语法
  2. animation:场景名称 播放时长 动画类型 播放次数;
  5. 值
  6. 播放时长：单位为秒。默认值是 0。
  7.  动画类型：linear    动画从头到尾的速度是相同的。
  8. ease    默认。动画以低速开始，然后加快，在结束前变慢。
  9. 播放次数：数字| infinite。
  10. infinite为无限次播放。
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <style>
  6. #div{
  7. width:500px;
  8. height:500px;
  9. border:1pxsolidred;
  10. margin:0auto;
  11. position:relative;
  12. }
  13. #div1{
  14. width:50px;
  15. height:50px;
  16. background:red;
  17. position:absolute;
  18. animation:moveDiv 4sease infinite;
  19. }
  20. @keyframes moveDiv {
  21. 0%{left:0;top:0;}
  22. 25%{left:450px;top:0;}
  23. 50%{left:450px;top:450px;}
  24. 75%{left:0;top:450px;}
  25. 100%{left:0;top:0;}
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <divid="div">
  31. <divid="div1"></div>
  32. </div>
  33. </body>
  34. </html>

image.png

代码讲解
1、设置子元素样式并定义动画
#div1{
width:50px;
height:50px;
background:red;
position:absolute;
animation:moveDiv 4s ease infinite;
}
animation:moveDiv 4s ease infinite;  定义动画场景名称为moveDiv播放时长为4秒且无限播放


2、设置子元素动画场景
@keyframes moveDiv {
0%{left:0;top:0;}
25%{left:450px; top:0;}
50%{left:450px; top:450px;}
75%{left:0; top:450px;}
100%{left:0; top:0;}
}
0%{left:0;top:0;}  设置动画开始时子元素在左上角
25%{left:450px; top:0;}  设置动画四分之一时子元素在右上角
50%{left:450px; top:450px;}  设置动画一半时子元素在右下角
75%{left:0; top:450px;}  设置动画四分之三时子元素在左下角
100%{left:0; top:0;}  设置动画结束时子元素在左上角