动画属性：transition 和 animation

目录

1、transition 过渡

2、animation 动画

3、transition 和 animation 的区别

---

1、transition 过渡

css3 的 transition 过渡属性，可以让元素变化的有一个过渡过程而不至于突然出现或者改变样式。

1.1 transition 参数：

属性	描述
transition	属性名 | 时长 | 过渡方式 | 延迟
transition-property	指定需要执行过渡动画的属性的名字，比如 width、height，该参数可以设置为 all
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定过渡效果：easer：逐渐变慢、liner ：匀速、ease-in：加速、ease-out：减速、ease-in-out：先加速再减速
transition-delay	定义过渡效果何时开始

注意：并不是所有属性都能实现过渡效果，比如将一个元素的 display : none 改成 block 就没法过渡，一般改 visibility : hidden => visible 是可以实现的，除此之外，background 颜色和 opacity 透明度也是可以过渡的。

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，比如：:hoever 、:focus 、:checked 、媒体查询触发 、JavaScript 触发。

2.2 transition 优缺点

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

• （1）transition需要事件触发，所以没法在网页加载时自动发生。
• （2）transition是一次性的，不能重复发生，除非一再触发。
• （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
• （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

2、animation 动画

CSS3 animation 属性就是为了解决 transition 的缺陷问题而提出的。CSS3 的 animation 属性可以像 Flash 制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation 实现动画效果主要由两部分组成：

1）通过类似 Flash 动画中的帧来声明一个动画；

2）在 animation 属性中调用关键帧声明的动画；

2.1 animation 参数：

参数	描述
animation	关键帧 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 是否暂停 | 填充模式
animation-name	关键帧名称：none 为默认值，将没有任何动画效果，其可以用来覆盖任何动画
animation-duration	时长：默认值为 0，意味着动画周期为 0，也就是没有任何动画效果
animation-timing-function	过渡方式：easer：逐渐变慢、liner ：匀速、ease-in：加速、ease-out：减速、ease-in-out：先加速再减速
animation-delay	延迟：在开始执行动画时需要等待的时间
animation-iteration-count	次数：定义动画的播放次数，默认为1，如果为 infinite，则无限次循环播放
animation-direction	方向：默认为 nomal，每次循环都是向前播放，（0-100），另一个值为 alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放
animation-state	是否暂停：默认为 running，播放，paused，暂停
animation-fill-mode	填充模式：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

2.2 @keyframes

CSS3 的 animation 制作动画效果主要包括两部分：1. 用关键帧声明一个动画，2.在 animation 调用关键帧声明的的动画。@keyframes 就是关键帧。这个帧与 Flash 里的帧类似，一个动画中可以有很多个帧。

div:hover {
  animation: bubble 2s linear 0.5s 1 normal forwards;     //在 animation 属性中调用关键帧声明的动画 bubble
}

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

@keyframes slidein {
  from { transform:scale(0.5); opacity:0.0; }   //除了写 % ，还可以写from-to
  to { transform:scale(1.0); opacity:1.0; }
}

3、transition 和 animation 的区别

animation 属性类似于 transition，他们都是随着时间改变元素的属性值，其主要区别在于：transition 需要触发一个事件才会随着时间改变其 CSS 属性；animation 在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素 CSS 属性，达到一种动画的效果。