CSS动画

 主页   资讯   文章   代码   电子书 

Transitions in action

前面我们介绍了 transitionanimation 这两个属性,这一节我们来看看具体的代码。

Transitions

在浏览器中,一个元素从一个状态转变成另一个状态,我们称发生了过渡(transition)。浏览器负责来渲染状态变化过程中的每一帧从而创建一个动画效果。

transition 是 CSS 中的属性,就像给元素设置 heightwidthborder 一样,我们也可以给元素设置 transition

transition 怎么用呢?来看下面代码:

transition: background 0.5s linear;

在上面的代码中,我们告诉浏览器,我们希望在 0.5 秒的时间里,按照 linear 的时间函数(timing-function)来改变某个元素的 background 属性。

下面结合具体的例子来看一下:我们希望当鼠标在按钮上悬停时(hover)改变按钮的 background

button {
  background: white;
  transition: background 0.5s linear;
}

button:hover {
  background: green;
}

这里有一点要注意,transition 属性的位置要放到 button 中。这样会告诉浏览器,不光按钮从初始状态变成悬停(hover)的时候要添加过渡效果,当从悬停状态变回初始状态时也要添加过渡效果。

如果我们把 transition: background 0.5s linear; 这句放到下面 button:hover 里,那么当按钮从初始状态变成悬停状态时会有过渡效果,但当从悬停变回初始状态时,就立刻改变了 background,而没有过渡的效果。

Example: Button transition

你可以查看 CodePen 上的代码,并尝试修改代码来体会不同的效果。

请注意 CodePen 代码里以 transition- 开头的属性。这里用了全写的方式。

transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease-out;

上面的代码的意思希望浏览器在0.4s的时间里改变all所有的属性,包括 colours, size, position 等。

可以将 transition-timing-function 设置成下面的贝塞尔曲线函数形式,试试效果会发生什么改变。

transition-timing-function: cubic-bezier(0.59, -0.26, 0.33, 1.42);

Prefixes and browser compatibility

上面的代码,为了书写和阅读的方便,都没有添加浏览器前缀,如果要发布正式版,请在属性前加上对应的浏览器前缀。

可以使用 Autoprefixer(Codepen 上 css 设置的一个自动添加选项),或者手动添加。

    -webkit-transition: ...;
    -moz-transition: ...;
    transition: ...;

Homework

大家可以试着修改上面的代码来看看会有什么效果。

这有一个好玩的例子,你可以试一下:awesome hover style