CSS 动画属性(animation)-KeepStudy

CSS 动画属性(animation)

| 属性 | 描述 | CSS |
|-----|-----|-----|
| @keyframes | 定义一个动画,@keyframes定义的动画名称用来被，animation-name所使用。 | 3 |
| animation | 复合属性。检索或设置对象所应用的动画特效。 | 3 |
| animation-name | 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 | 3 |
| animation-duration | 检索或设置对象动画的持续时间 | 3 |
| animation-timing-function | 检索或设置对象动画的过渡类型 | 3 |
| animation-delay | 检索或设置对象动画的延迟时间 | 3 |
| animation-iteration-count | 检索或设置对象动画的循环次数 | 3 |
| animation-direction | 检索或设置对象动画在循环中是否反向运动 | 3 |
| animation-play-state | 检索或设置对象动画的状态 | 3 |

## @keyframes 规则
- 使用@keyframes规则，你可以创建动画。
- 创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。
- 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。
- 为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

- 语法：@keyframes animationname {keyframes-selector {css-styles;}}
- 值
    - animationname：必需的。定义animation的名称。
    - keyframes-selector：必需的。动画持续时间的百分比。
        - 合法值： 0-100%、 from (和0%相同)、 to (和100%相同)
        - 注意： 您可以用一个动画keyframes-selectors。
    - css-styles：必需的。一个或多个合法的CSS样式属性
- 实例
```css
@keyframes mymove{
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove{
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
```

## animation（动画） 属性
- 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- 值
    - animation-name：指定要绑定到选择器的关键帧的名称
    - animation-duration：动画指定需要多少秒或毫秒完成
    - animation-timing-function：设置动画将如何完成一个周期
    - animation-delay：设置动画在启动前的延迟间隔。
    - animation-iteration-count：定义动画的播放次数。
    - animation-direction：指定是否应该轮流反向播放动画。
    - animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    - animation-play-state：指定动画是否正在运行或已暂停。
    - initial：设置属性为其默认值。
    - inherit：从父元素继承属性。
- 实例
```css
div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
```

## animation-name 属性
- 语法：animation-name: keyframename|none;
- 值
    - keyframename：指定要绑定到选择器的关键帧的名称
    - none：指定有没有动画（可用于覆盖从级联的动画）
- 实例
```css
animation-name:mymove;
-webkit-animation-name:mymove; /* Safari 和 Chrome */
```

## animation-duration 属性
- 语法：animation-duration: time;
- 值
    - time：指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果。
- 实例
```css
animation-duration:2s;
-webkit-animation-duration:2s; /* Safari 和 Chrome */
```

## animation-timing-function 属性
- 语法：animation-timing-function: value;
- 值
    - linear	动画从头到尾的速度是相同的。
    - ease	默认。动画以低速开始，然后加快，在结束前变慢。
    - ease-in	动画以低速开始。
    - ease-out	动画以低速结束。
    - ease-in-out	动画以低速开始和结束。
    - steps(int,start|end)：指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：start：表示直接开始；end：默认值，表示戛然而止。
    - cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
- 实例
```css
/* Chrome, Safari 和 Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);} 
/* 标准语法 */
#div1 {animation-timing-function: linear;}
#div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
```

## animation-delay 属性
- 语法：animation-delay: time;
- 值
    - time：可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
- 实例
```css
animation-delay: -2s /* Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */
```

## animation-iteration-count 属性
- 语法：animation-iteration-count: value;
- 值
    - n：一个数字，定义应该播放多少次动画
    - infinite：指定动画应该播放无限次（永远）
- 实例
```css
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/
```

## animation-direction 属性
- 语法：animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
- 值
    - normal：默认值。动画按正常播放。
    - reverse：动画反向播放。
    - alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
    - alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
    - initial：设置该属性为它的默认值。
    - inherit：从父元素继承该属性。
- 实例
```css
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
```

## animation-play-state 属性
- 语法：animation-play-state: paused|running;
- 值
    - paused：指定暂停动画
    - running：指定正在运行的动画
- 实例
```css
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
```

顶部

CSS属性

目录

相关推荐