CSS积累知识点

关键帧动画

@keyframes 、animation

• 用 @keyframes 来定义动画过程
  • 方式：@keyframes 函数名{ }
  • 其中用 n% 来定义过程中的行为
  • 在前后的动画过程中加入了不同的颜色，会在这些颜色之间发生渐变
  • transfrom动画的变化过程
• animation
  • 写在要被执行动画的标签中
  • 属性：动画函数名 执行时间 执行次数 执行速度 执行方式
• 和数字相关的可以定义动画
• 动画属性包括：①animation-name，②animation-duration，③animation-timing-function，④animation-delay，⑤animation-iteration-count，⑥animation-direction，⑦animation-fill-mode，⑧animation-play-state
  1、animation-name：指定要绑定到选择器的关键帧的名称。
  2、animation-duration：定义动画完成一个周期需要多少秒或毫秒
  3、animation-timing-function：指定动画将如何完成一个周期。

值	说明
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
step-start	在变化过程中，都是以下一帧的显示效果来填充间隔动画
step-end	在变化过程中，都是以上一帧的显示效果来填充间隔动画
steps()	可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。