校招刷题群
高效刷题 迎战校招
校招精选试题
近年面笔经面经群内分享
Java刷题群 前端刷题群 产品运营群
首页 > js语言和框架 > 基础属性作用
题目

讲讲你知道的 CSS 动画属性有哪些

解答

css3的动画属性
  1、animation-name属性
  animation-name属性:定义动画名称,用于指定由规则定义的动画的一个或多个名称。
  注:animation-name属性必须与规则@keyframes配合使用,因为动画名称是由@keyframes定义声明的,如果提供多个属性值用逗号隔开。
  @keyframes规则相当于一个命名空间,后面跟一个名词,如果在class中的animation-name定义了与之对应的name就可以执行动画。
  2、animation-duration属性
  animation-duration属性用于指定执行一个周期动画应该花多长时间。
  时间以秒或毫秒指定,并且最初设置为“0”,这意味着动画即时发生;我们可以指定一个持续时间或多个以逗号分隔的持续时间。
  3、animation-timing-function属性
  animation-timing-function属性是用来设置播放方式的,它可以指定定时函数,该函数定义动画对象随时间的速度。它描述了动画在其持续时间的一个周期内如何进展,允许它在其过程中改变速度。
  取值如下:
  ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
  linear:线性效果,速度将从开始到结束稳定。
  ease-in:渐显效果,动画将缓慢启动,然后获得更多加速并稳定到持续时间结束。
  ease-out:渐隐效果,动画将快速启动,然后减速并稳定到持续时间结束。
  ease-in-out:渐显渐隐效果,它是组合了ease-in和ease-out。动画或过渡将开始缓慢,在中间加速,然后减速直至结束。
  step-start:马上跳转到动画结束状态,动画或过渡将突然变为结束状态并保持在该位置直到动画结束。
  step-end:动画或过渡保持其开始状态,直到动画执行结束,直接跳转到其动画结束状态。
  step(<number>[,[start|end]]):
  step()可以将转换的持续时间划分为相等大小的间隔;或指定输出百分比的变化是发生在间隔的开始还是结束。
  第一个参数number为指定的间隔数,即把动画分为n步阶段性显示,第二个参数默认为end,设置最后一步状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,以animation-fill-mode的设置为动画结束状态。

C 0条回复 评论

帖子还没人回复快来抢沙发