css3 animation动画
基本用法:
- 定义一些帧
- 把这些帧组成一组
- 给这组帧起个名字
- 应用给元素
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. 轮播图
平滑过渡方法:
- 在最后一张图片后面再加上第一张张图(第一张图片放两次100,109行)
- 设置帧时,每张图片逗留5%的时间,然后均速滑动
- 在最后的时间100%,需要移到最后一张图片,然后动画结束回到初始状态的第一张图片,因为第一张和第二张图片一样,看起来则没有变化
- 设置无限次,可以做到轮播图平滑过渡
帧跳转过渡方法:
- 直接使用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.列表无缝滚动
- 与轮播图原理相似,最后一项与第一项相同
- 父元素可以装两项,共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>