@h5
作业中关于H5中动画的实现——animation
动画名
animation-name: page1_scale;
动画时间 为2s
animation-duration: 2s;
动画次数 数字代表的就是次数 infinite无限循环
animation-iteration-count: infinite;
动画效果
animation-timing-function: linear;
延迟
animation-delay: 2s;
animation-timing-function 属性用于指定定时函数,该定时函数定义动画对象随时间的速度。它描述了动画将如何在其持续时间的一个周期内进行,从而允许动画在其过程中改变速度。
在该函数中可以使用自己的值,也可以预定义的值:
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
最关键最关键的一点是:timing-function 作用于每两个关键帧之间,而不是整个动画。因此它仅仅是过渡效果,需要每个关键帧都定义一次(也可不定义使用默认的 ease)。
2s时间 infinite无限循环 linear线性变换
一个时间就代表动画时间 如果为两个第一个为动画时间 第二个为延迟
如果有数字的情况那么它代表的就是动画次数
both为停止在动画结束状态
animation: page1_scale 1s infinite linear;