初探动画

发表于 | 分类于 |

TL;DR

  • transition:控制状态变化的时间
  • transition : 变化时间，动画延迟，属性，动画函数
  • transition的属性只能是颜色和数值类，特殊一点的是visibility
  • transition是事件触发动画，一次性执行，可以用动画延迟完成一些复杂的动画
  • animation:变化时间 ，动画延迟，动画名称 ，动画函数 ，动画执行次数， 动画结束状态 ，动画停止状态 ，动画步骤
  • animation必须定义动画，动画完成之后默认回到未开始动画的状态。

Transition

没有transition,所有状态的变化都是瞬间完成的
transition的作用在于，指定状态变化所需要的时间。
查看demo

1
2
3
4
5
6
7
8
9
.box2
    width 100px
    height 100px
    // 1s实现过渡
    transition 1s
    &:hover
        width 200px
        height 200px
        background-color #f69

可以指定适用的属性,这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现

1
transition 1s height

在同一行transition语句中，可以分别指定多个属性。

1
transition: 1s height, 1s width

transition-delay

delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

1
transition: 1s height, 1s 1s width

transition-timing-function

transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。
除了ease，还有linear(匀速)，ease-in(加速)，ease-out(减速)，cubic-bezier(自定义速度模式)

transition的各个属性

1
2
3
4
5
6
7
8
9
img{
    transition: 1s 1s height ease;
}
img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

transtion适用的属性

主要是颜色，数值类，如color,z-index,font-size
比较特殊的是visibility，虽然不是数值，但仍然可以，相当于（hidden:0,visible:1）
属性列表
效果查看

transition的使用注意

  • transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
  • 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

    transition的局限

    transition的优点在于简单易用，但是它有几个很大的局限。
  • （1）transition需要事件触发，所以没法在网页加载时自动发生。
  • （2）transition是一次性的，不能重复发生，除非一再触发。
  • （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
  • （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
    CSS Animation就是为了解决这些问题而提出的。

animation

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

1
2
3
div:hover {
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

1
2
3
4
5
@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）
动画播放完之后回到最开始的状态。

动画次数

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
也可以指定动画具体播放的次数，比如3次。

1
2
3
div:hover {
  animation: 1s rainbow infinite;
}

animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。
animation-direction属性，可以改变这种行为。
默认是normal
还有一个常用的是reverse,字面上的意思
还有两个不常用且不兼容的，不想写了。

动画完成之后的状态

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

  • none：默认值，回到动画没开始时的状态。
  • forwards：让动画停留在结束状态。
  • backwards：让动画回到第一帧的状态。
  • both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
1
2
3
div:hover {
  animation: 1s rainbow forwards ;
}

animation的各个属性

1
2
3
4
5
6
7
8
9
10
11
12
div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

分步过渡

浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

1
2
3
div:hover {
  animation: 1s rainbow infinite steps(10);
}

animation-play-state

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态。
如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。

1
2
3
4
5
6
7
8
div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}
div:hover {
  animation-play-state: running;
}

注意事项

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}
@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

CSS动画简介