html定义动画,css动画是由什么组成的？

css动画是由三部分组成，分别为关键帧(keyframes)、动画属性(properties)、css属性。下面给大家具体介绍一下，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css动画的三个组成部分：关键帧(keyframes) - 定义动画在不同阶段的状态。

动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。(可以类比音视频播放器)

css属性 - 就是css元素不同关键帧下的状态。

1、关键帧(@keyframes)

语法@keyframes keyframes-name {

[ [ from | to | ] [, from | to | ]* block ]*

}keyframes-name：帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。

from：等效于 0%.

to：等效于 100%.

下面我们来看一个例子。

创建了一个@keyframes命名为dropdown。

关键帧主要分为3个阶段，0%、50%、100%。

动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。

修改的元素属性为margin-top.list div:first-child {

animation: dropdown 8s linear infinite;

}

@keyframes dropdown {

0% { margin-top: 0px;}

/** 暂停效果 */

10% { margin-top: 0px;}

50% { margin-top: -100px;}

60% { margin-top: -100px;}

90% { margin-top: -200px;}

100% { margin-top: -200px;}

}

源码地址：https://jsfiddle.net/vicharles/8a8yq8dk/15/

需要注意！当属性的个数不确定时：

当我们在定义不同关键帧，元素属性的个数是一个变化的值。

如果一个关键帧的属性，没有出现在其他关键帧的时候，那么这些属性将会使用上一帧的默认值。

区别在于，缺省之后的渐变效果是不会出现的。比如下面两种写法，@keyframes dropdown {

0% { top: 0; }

30% { top: 300px; }

50% { top: 150px; }

70% { top: 300px; }

80% { top: 0px; left:-200px;}

100% { top: 0px; }

}

@keyframes dropdown {

0% { top: 0; left:0px;}

30% { top: 300px; left:0px;}

50% { top: 150px; left:0px;}

70% { top: 300px; left:0px;}

80% { top: 0px; left:-200px;}

100% { top: 0px; left:0px;}

}

2、动画属性

动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。

主要也分为两大点：指定播放的元素

定义播放信息的配置

动画源码：https://jsfiddle.net/vicharles/8a8yq8dk/35/

简写属性形式:animation:

[animation-name] [animation-duration] // 动画的名称、持续时间

[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间

[animation-iteration-count] [animation-direction] // 播放次数、播放顺序

[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

更多CSS相关知识，可访问 CSS教程 ！！