欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3动画——animation

程序员文章站 2022-10-25 17:05:53
CSS3动画animation的学习笔记,包括animation的属性及其值的设定,以及keyframes的值的设定方法 ......

  可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张

animation属性值

1.animation-name

  对象的动画名称,以便后续设置动画属性时使用

  默认为none,如果设置的话即为要设置动画的关键帧的名字

  后续对该元素设置动画时,要用@keyframes,设置起始的样式(from)和终止的样式(to)

 2.animation-duration

  动画持续的时间(播放完成所花时间)

  默认值为0,可设置单位为秒(s)毫秒(ms)

3.animation-timing-function

  动画的过度方式

  常用的有:linear(线性过渡)、ease(平滑过渡)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)

  如有复杂需求,要设置贝塞尔曲线(cubic-bezier(数值1,数值2,数值3,数值4)),其中四个数值范围为0-1

4.animation-delay

  动画开始前等待时间(该时间不包括在动画放映时间内)

  默认值为0,可设置单位为秒(s)毫秒(ms),如设置负值立即开始动画

  注:设置的时间带有小数点时,建议省去整数部分,如0.5写成.5

5.animation-interation-count

  动画循环次数

  值为数字,默认为1,也可设置infinite(无限循环)

6.ainmation-direction

  动画循环时的方向

  可设置的值有:none(保留原有样式,默认值)、reverse(反向)、alternate(先正常再反向并交替进行)、alternate-reverse(先反向再正常并交替进行)

  其中alternate和alternate-reverse必须在循环次数不为1时才生效

7.animation-fill-mode

  动画不播放(已经放完/有延迟没播放)时的元素样式

  可设置的值有:none(没有样式,默认值)、forwards(结束时状态)、backwards(开始时状态)、both(同时设置开始和结束时状态)

8.animation-play-state

  动画状态,即播放/暂停

  可设置的值有:running(播放,默认值)、pause(暂停)

9.animation的简写

  其中必须设置nameduration

  解析时,默认把第一个字符串属性值解析为name第一个带有时间的属性值解析为duration之后一个带有时间的属性值解析为delay

 /*按照每个元素来写的动画属性*/
1 div{ 2 width:100px;height:100px; 3 animation-name:outside; 4 animation-duration:2s; 5 animation-timing-function:linear; 6 animation-delay:1s; 7 animation-iteration-count:infinite; 8 animation-direction:alternate-reverse; 9 animation-fill-mode:forwards; 10 animation-play-state:pause; 11 } 12 @keyframes outside{ 13 from{transform:translatey(0px);} 14 to{transform:translatey(1000px);} 15 }

 

keyframes

  通过控制关键帧来改变动画的播放效果,对手机端必须加上-webkit-

  其中0%和100%可用from和to代替

 1 div{
 2     width:100px;height:100px;background:black;
 3     animation:here 5s linear infinite alternate-reverse;
 4 }
 5 @-webkit-keyframes here{
 6        0% {capacity:0;}
 7      25% {capacity:0.25;}
 8      50% {capacity:0.5;}
 9      75% {capacity:0.75;}
10     100% {capacity:1;}
11 }