会动的CSS3世界

一、CSS3 transition(过渡)

1. 基本概念

在 CSS3 还没 transitions 这个概念前,CSS 是没有时间轴,所有的状态变化,都是即时完成。通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

2. 如何使用

会动的CSS3世界_第1张图片

上图所示,鼠标移动到div时,div会瞬间变大,显得很突兀。

.demo {
  width: 100px;
  height: 100px;
  background-color: #84a1c9;
}
.demo:hover {
  width: 200px;
  height: 200px;
  background-color: #87d1f1;
} 

会动的CSS3世界_第2张图片

加上 transition,指定状态变化所需要的时间。

.demo {
  transition: all 1s;
} 

可以看出,要实现这一点,必须规定两项内容:

  • 希望把效果添加到哪个css属性上
  • 效果的时长

注意:如果时长没规定,则不会有过渡效果,默认值为 0。

3. 过渡属性

  • transition:简写属性,用于在一个属性中设置四个过渡属性。
  • transition-property:规定应用过渡的 CSS 属性的名称。

    • none:没有属性会获得过渡效果。
    • all:所有属性都将获得过渡效果。
    • property:定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。
  • transition-duration:定义过渡效果花费的时间。默认是 0。

    • time:规定完成过渡效果需要花费的时间(以秒或毫秒计)。
  • transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

    • linear:规定以相同速度开始至结束的过渡效果。
    • ease:规定慢速开始,然后变快,然后慢速结束的过渡效果。
    • ease-in:规定以慢速开始的过渡效果。
    • ease-out:规定以慢速结束的过渡效果。
    • ease-in-out:规定以慢速开始和结束的过渡效果。
    • cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(贝塞尔曲线)
  • transition-delay:规定过渡效果何时开始。默认是 0。

    • time:规定在过渡效果开始之前需要等待的时间,(以秒或毫秒计)。

(1)指定属性改变

我们还可以指定某个属性适用 transition,比如只指定 height,此时,height 有变化过程,其他依旧瞬间变化。

会动的CSS3世界_第3张图片

.demo {
  transition: height 1s;
} 

(2)多项改变

如需向多个属性添加过渡效果,可以分别指定多个属性,由逗号隔开

会动的CSS3世界_第4张图片

.demo {
  transition: height 1s, background-color 1s;
} 

(3)延迟改变

我们希望,等 width 先变化,等结束后,再让 heigh 发生变化,最后再背景发生变化,实现这点很容易,为 width 跟背景指定一个delay参数。

会动的CSS3世界_第5张图片

.demo {
  transition: width 1s, height 1s 1s, background-color 1s 2s;
} 

(4)结束状态改变 transition 中的值

div 在 hover 态时,发生样式改变时,重新定义 transition 属性的值,会出现意想不到的情况:当鼠标移入时,以结束状态里的 transition 属性为准发生改变;当鼠标移出时,以开始状态的 transition 属性为准变回原来的样式。

会动的CSS3世界_第6张图片

.demo {
  width: 100px;
  height: 100px;
  background-color: #84a1c9;
  transition: height 1s;
}
.demo:hover {
  width: 200px;
  height: 200px;
  background-color: #1a93e8;
  transition: all 1s;
} 

4. 使用注意事项

1.浏览器支持

会动的CSS3世界_第7张图片

2.不是所有的 CSS 属性都支持 transition,具体 请点击此处

3.transition 需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height 从0px变化到100px,transition 可以算出中间状态。但是,transition 没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none 到 block,background: url(foo.jpg)到url(bar.jpg)等等。

4.简写书写顺序

a. 单项属性改变时,当只有一个时间设置时,默认是 transition-duration。

会动的CSS3世界_第8张图片

b. 当有两个时间时,第一个为 transition-duration,第二个为 transition-delay。

会动的CSS3世界_第9张图片

c. 多项属性改变时,不管书写前后,一切发生改变顺序,都由每个属性设置 transition-delay 的延迟时间而定。
.demo4 {
  transition: width 1s, height 1s 1s, background-color 1s 2s;
} 
.demo4 {
  transition: height 1s 1s, background-color 1s 2s, width 1s;
} 

以上两种写法,最终实现效果都一样。

5. transition 的局限

transition 的优点在于简单易用,但是它有几个很大的局限。

(1)需要事件触发,所以没法在网页加载时自动发生。

(2)一次性的,不能重复发生,除非一再触发。

(3)只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

CSS animation 就是为了解决这些问题而提出的。

三、CSS3 animation(动画)

会动的CSS3世界_第10张图片

首先,要实现动画,必须规定三项内容:

  • 指定动画一个周期持续的时间
  • 动画效果的名称
  • 用 @keyframes 关键字,定义动画效果
.demo {
  animation: myAn 2s linear 3 alternate both;
}
@keyframes myAn {
  0% {
    transform: translateX(0) scale(1) rotate(0);
  }
  50% {
    transform: translateX(100px) scale(1.5) rotate(180deg);
  }
  100% {
    transform: translateX(200px) scale(1) rotate(360deg);
  }
} 

1. @keyframes

先说说 @keyframes,也称关键帧动画,不需要给出每一帧的定义,只需要定义一些关键的帧即可,其余的帧,浏览器会根据计时函数插值计算出来。


0% 可以用 from 代表,100% 可以用 to 代表,因此上面的代码等同于下面的形式。

@keyframes myAn {
  from {
    transform: translateX(0) scale(1) rotate(0);
  }
  50% {
    transform: translateX(100px) scale(1.5) rotate(180deg);
  }
  to {
    transform: translateX(200px) scale(1) rotate(360deg);
  }
} 

如果省略某个状态,浏览器会自动推算中间状态,所以下面都是合法的写法。

@keyframes myAn {
  50% {
    transform: translateX(100px) scale(1.5) rotate(180deg);
  }
  to {
    transform: translateX(200px) scale(1) rotate(360deg);
  }
}
@keyframes myAn {
  to {
    transform: translateX(200px) scale(1) rotate(360deg);
  }
} 

多个状态有重复时,可写在一行,用逗号隔开。

@keyframes pound {
  from,to { transform: none; }
  50% { transform: scale(1.2); }
} 

浏览器支持

会动的CSS3世界_第11张图片

2. animation 动画

当使用 @keyframes 创建动画后,得去调用它,否则不会产生动画效果。用 JS 理解,相当于只有变量声明还不够,还得使用它。

(1)动画属性

通过开发者工具可以发现,animation 属性是8个属性的简写。

会动的CSS3世界_第12张图片

具体含义如下:

  • animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。

    • time:规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。
  • animation-timing-function:规定动画的速度曲线。默认是 "ease"。

    • linear:动画从头到尾的速度是相同的。
    • ease:默认。动画以低速开始,然后加快,在结束前变慢。
    • ease-in:动画以低速开始。
    • ease-out:动画以低速结束。
    • ease-in-out:动画以低速开始和结束。
    • cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  • animation-delay:规定动画何时开始。默认是 0。

    • time:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值是 0。
  • animation-iteration-count:规定动画被播放的次数。默认是 1。

    • n:定义动画播放次数的数值。
    • infinite:规定动画应该无限次播放。
  • animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。

    • normal:默认值。动画应该正常播放。
    • reverse: 表示动画反向播放。
    • alternate: 表示正向和反向交叉进行。
    • alternate-reverse: 表示反向和正向交叉进行。
  • animation-fill-mode:规定对象动画时间之外的状态。

    • none:不改变默认行为。
    • forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    • backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    • both:向前和向后填充模式都被应用。
  • animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。

    • paused:规定动画已暂停。
    • running:规定动画正在播放。
  • animation-name: 规定 @keyframes 动画的名称。

    • keyframename:规定需要绑定到选择器的 keyframe 的名称。
    • none:规定无动画效果。

(2)属性详解

注意 animation: myAn 2s linear 3 alternate both; 声明中的 both。它是属性 animation-fill-mode 的一个值。这个属性容易被忽略,却是 css 动画比较重要的一个属性。直译为动画填充模式,具体说的是什么事情呢?

@keyframes 只是定义了动画过程中每一帧的值,然而在动画开始前和动画结束后,元素该处于什么状态呢?animation-fill-mode 说的就是这个事情。除了默认值 none 外,还有另外 3 个值:

forwards,表示,动画完成后,元素状态保持为最后一帧的状态。

backwards,表示,有动画延迟时,动画开始前,元素状态保持为第一帧的状态。

both,表示上述二者效果都有。

举个例子,div 从 100px 处移动到 200px 处的关键帧定义为:

@keyframes move{
  0%{
    transform: translate(100px,0);
  }
  100%{
    transform: translate(200px,0);
  }
} 

设置填充模式为 forwards 时,动画最后停留在 200px 处:

设置动画延迟 1s 后执行,且填充模式为 backwards 时,可以看到动画在开始前是处于 100px 处,动画结束后回到 0px 处:

最后设置填充模式为 both 时:

动画结束后,保持动画最后一帧的状态,比如我们可以实现一个进度条:

div{
  width: 400px;
  height: 10px;
  border: 1px solid #e4e4e4;
  background: linear-gradient(to right, #30f3ed, #1a93e8);
  background-repeat: no-repeat;
  background-size: 0;
  border-radius: 5px;
  animation: move 2s linear forwards;
}
@keyframes move{
  100%{
    background-size: 100%;
  }
} 

会动的CSS3世界_第13张图片

上面提到了可以使用 animation-delay 设置延迟时间。值得注意的是,延迟可以为负数。负延迟表示动画仿佛开始前就已经运行过了那么长时间。

拿上述进度条为例子,原动画用了 2s 是从 0% 加载到 100% 的。如果设置延迟为 -1s。这动画会从 50% 加载到 100% 。就像已经运行了 1s 一样:

css 动画是可以暂停的。属性 animation-play-state 表示动画播放状态,默认值 running 表示播放, paused 表示暂停。

浏览器支持

会动的CSS3世界_第14张图片

三、 Animate.css的使用方法

animate.css 是一个使用 CSS3 的 animation 制作的动画效果的 CSS 集合,里面预设了很多种常用的动画,且使用非常简单。

官网:https://animate.style/


1. 引用

通过npm安装

npm install animate.css --save 

或者,使用在线cdn


   
 

2. 使用

也支持多个动画效果同时使用

------------------------------ END ------------------------------

你可能感兴趣的