css3 animation动画

基本用法：

  1. 定义一些帧
  2. 把这些帧组成一组
  3. 给这组帧起个名字
  4. 应用给元素

ex：

@keyframes [name]{
  from{ ... }, /*0%{ ... }*/
  to{ ... } /*100%{ ... }*/
}
div{
  animation-name: [name];
  animation-duration: 2s;/*没有此项动画显示不出来*/
}

animation属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。

animation-duration ：规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function ：规定动画的速度曲线。

  • linear：动画从头到尾的速度是相同的。
  • ease：默认。动画以低速开始，然后加快，在结束前变慢。
  • ease-in：动画以低速开始。
  • ease-out：动画以低速结束。
  • ease-in-out：动画以低速开始和结束。
  • cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。网址：https://cubic-bezier.com/
  • steps(number_of_steps, direction)：定格动画的效果，阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。
    • number_of_steps ：阶梯数（必须是一个正整数），他将动画的总时长按照阶梯数等距划分
    •  direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

animation-delay ：规定在动画开始之前的延迟。定义动画何时开始。值以秒或毫秒计。

animation-iteration-count ：规定动画应该播放的次数。

  • n：定义动画播放次数的数值。
  • infinite：规定动画应该无限次播放。

animation-direction：规定是否应该轮流反向播放动画。

  • normal：默认值。动画应该正常播放。
  • reverse：动画反向播放。
  • alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。注：如果把动画设置为只播放一次，则该属性没有效果。
  • alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。注：如果把动画设置为只播放一次，则该属性没有效果。
  • initial：设置该属性为它的默认值。
  • inherit：从父元素继承该属性。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

  • none：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
  • forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
  • backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
  • both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
  • initial：设置该属性为它的默认值。
  • inherit：从父元素继承该属性。

animation-play-state：指定动画是否正在运行或已暂停。

  • paused：指定暂停动画。
  • running：指定正在运行的动画。

细节问题：

  • 帧的顺序放置没有先后关系
  • 0%{}，100%{}若没有，会自动加帧，使用元素的原始状态
  • animation-name:A,B,C; 越往后权重越大，若属性重复，后面的会覆盖前面的动画属性。

应用：

1. 轮播图

平滑过渡方法：

  1. 在最后一张图片后面再加上第一张张图（第一张图片放两次100,109行）
  2. 设置帧时，每张图片逗留5%的时间，然后均速滑动
  3. 在最后的时间100%，需要移到最后一张图片，然后动画结束回到初始状态的第一张图片，因为第一张和第二张图片一样，看起来则没有变化
  4. 设置无限次，可以做到轮播图平滑过渡

帧跳转过渡方法：

  1. 直接使用steps()即可
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>轮播图</title>
  7     <style>
  8         /* body{
  9             display: grid;
 10         } */
 11         main{
 12             width: 400px;
 13             height: 200px;
 14             /* align-self: center;
 15             justify-self: center; */
 16             overflow: hidden;
 17             position: relative;
 18         }
 19         section{
 20             width: 1600px;
 21             height: 200px;
 22             /* grid-template: 1fr/repeat(4,400px); */
 23             display: flex;
 24             animation-name: slide;
 25             animation-duration: 12s;
 26             /* animation-timing-function: steps(3,end); */
 27             animation-timing-function: linear;
 28             animation-iteration-count: infinite;
 29         }
 30         section:hover{
 31             animation-play-state: paused;
 32         }
 33         div{
 34             overflow: hidden;
 35             width: 400px;
 36             height: 200px;
 37         }
 38         img{
 39             width: 100%;
 40             height: 100%;
 41         }
 42 
 43         @keyframes slide{
 44             /* to{
 45                 transform: translateX(-1200px);
 46             } */
 47             0%{
 48                 transform: translateX(0px);
 49             }
 50             5%{
 51                 transform:translateX(0px);
 52             }
 53             30%{
 54                 transform: translateX(-400px);
 55             }
 56             35%{
 57                 transform: translateX(-400px);
 58             }
 59 
 60             60%{
 61                 transform: translateX(-800px);
 62             }
 63             65%{
 64                 transform: translateX(-800px);
 65             }
 66 
 67             95%{
 68                 transform: translateX(-1200px);
 69             }
 70             100%{
 71                 transform: translateX(-1200px);
 72             }
 73         }
 74         ul{
 75             position: absolute;
 76             width: 200px;
 77             left: 50%;
 78             bottom: 20px;
 79             transform: translateX(-55%);
 80             display: flex;
 81             justify-content: space-evenly;
 82             list-style: none;
 83         }
 84         li{
 85             width: 30px;
 86             height: 30px;
 87             border-radius: 50%;
 88             background: rgba(0, 0, 0, .3);
 89             display: flex;
 90             justify-content: center;
 91             align-items: center;
 92             color: white;
 93         }
 94     </style>
 95 </head>
 96 <body>
 97     <main>
 98         <section>
 99             <div>
100                 <img src="./tiger.jpg" alt="">
101             </div>
102             <div>
103                 <img src="./picture.jpg" alt="">
104             </div>
105             <div>
106                 <img src="./adamcatlace.jpg" alt="">
107             </div>
108             <div>
109                 <img src="./tiger.jpg" alt="">
110             </div>
111         </section>
112         <ul>
113             <li>1</li>
114             <li>2</li>
115             <li>3</li>
116         </ul>
117     </main>
118 </body>
119 </html>

 

2.列表无缝滚动

  1. 与轮播图原理相似，最后一项与第一项相同
  2. 父元素可以装两项，共10项，则100%时间时遍历了第9项，此时动画结束，第一项与第十项重复
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>列表无缝滚动</title>
 7     <style>
 8         main{
 9             width: 100px;
10             height: 100px;
11             overflow: hidden;
12         }
13         ul{
14             width: 100px;
15             height: 500px;
16             animation-name: slide;
17             animation-duration: 6s;
18             animation-timing-function: linear;
19             animation-iteration-count: infinite;
20         }
21         li{
22             width: 100px;
23             padding: 10px;
24             height: 30px;
25         }
26         @keyframes slide{
27             to{
28                 transform: translateY(-450px);
29             }
30         }
31         ul:hover{
32             animation-play-state: paused;
33         }
34     </style>
35 </head>
36 <body>
37     <main>
38         <ul>
39             <li>1</li>
40             <li>2</li>
41             <li>3</li>
42             <li>4</li>
43             <li>5</li>
44             <li>6</li>
45             <li>7</li>
46             <li>8</li>
47             <li>9</li>
48             <li>1</li>
49         </ul>
50     </main>
51 </body>
52 </html>

 

posted @ 2020-08-25 11:13  marilol  阅读(133)  评论(0)  编辑  收藏  举报