CSS3动画属性2

大家好,我是web_卓.欢迎来到我的博客

这次学习之前先让大家理清这些单词的意思,对我么你的学习很有利,我经常混淆这些属性,尴尬.

animation 动画   keyframes关键帧   transfrom  变形   translate 调动   

iteration 重复       transition 过渡  infinite 无限次数

 

Keyframes:

Keyframes被称为关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“


{…}”，括号中就是一些不同时间段样式规则。


@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}


在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分


比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。


在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，


100%对应的是to。


Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。




CSS3中调用动画


animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动


画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果

总结:

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3