位置:首页 > 软件操作教程 > 编程开发 > CSS > 问题详情

CSS3 动画属性

提问人:刘团圆发布时间:2020-11-19

1.@keyframes

    如果想要创建动画,那么就必须使规则。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,可以多次更改CSS样式的设走。指定的变化发生时使用%,或关键字“from”和“to1’,这是和0%到100%相同的。0%是开头动画,100%是当动画完成。

    为了获得最佳的浏览器支持,应该始终定义为0%和100%的选择器。

2.animation

    所有动画属性的简写属性,除了animation-play-state属性外,它们的语法如下:

    animation: name duration timing-function delay iteration-count direction fll-mode play-state;

3.animation-name

    animation-name属性为@keyframes动画规定名称,语法如下:

    animation-name: keyframename|none;

    该属性有两个参数:

    • keyframename:规定需要绑定到选择器的keyframe的名称。

    • none:规定无动画效果(可用于覆盖来自级联的动画)。

4.animation-duration

    animation-duration属性定义动画完成一个周期需要多少时间,单位是秒或毫秒,语法如下:

    animation-duration: time:

5.animation-timing-function

    animation-timing-function属性指定动画将如何完成一个周期。速度曲线定义动画从一套CSS样式变为另一套CSS样式所用的时间,速度曲线用于使变化更为平滑,语法如下:

    animatiion-tiTning-function: value :

    animation-timingHlinction使用的数学函数称为三次贝塞尔曲线、速度曲线。使用此函数时,可以使用自己的值或预先定义的值之一。

    animation-timing-function属性的值可以是以下几种:

    •inear:动画从头到尾的速度是相同的。

    •ease:默认。动画以低速开始,然后加快,在结束前变慢。

    •ease-in:动画以低速开始。 o ease-out:动画以低速结束。 

    •ease-in-out:动画以低速开始和结束。

    •cubic-bezier(n,n,n,n):在cubic-bezie「函数中使用自己的值。可能的值是0~1的数值。

6.animation-delay

    animation-delay属性定义动画什么时候开始,其值的单位可以是秒(s)或毫秒(ms)。

7.animation-iteration-count

    animation-iteration-count属性定义动画应该播放多少次,默认值为1,属性的值可以使以下 两种:

    • n:一个数字,定义应该播放多少次动画。

    • infinite:指定动画应该播放无限次(永远)。

8.animation-direction

    animation-direction属性定义是否循环交替反向播放动画,默认是normal,语法如下:

    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit:

    animation-direction属性的值可以使以下几种:

    © normal:默认值,动画按正常播放。

    © reverse:动画反向播放。

    © alternate:动画在奇数次(1、3、5……)正向播放,在偶数次(2、4、6……)反向播放。

    © alternate-reverse:动画在奇数次(1、3、5 )反向播放,在偶数次(2、4、6 )正向播放。

    © Initial:设置该属性为它的默认值。

    © Inherit:从父元素继承该属性。

9.animation-play-state

    animation-play-state属性指定动画是否正在运行或已暂停,默认是running,语法如下:

    animation-play-state: paused|running;

    animation-play-state属性的值可以是以下两种: 

    © paused:指定暂停动画。

    © running:指定正在运行的动画。

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部