CSS3动画——animation

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

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 }

 

posted @ 2019-07-30 11:56 且听风吟720 阅读(...) 评论(...) 编辑 收藏