过渡动画

过渡

给元素从一种样式到另一种样式的转换之间添加过渡效果，常用的场景有

元素的进入或离开
鼠标移入或移除

过渡属性

transition-property: property

说明：指定过渡效果的 css 属性名
取值：
- all: 表示全部属性都获得过渡效果
- none: 表示没有属性会获得过渡效果
- <property>: 指定需要应用过渡效果的 css 属性名列表，不同的属性名以逗号隔开
默认值：all

transition-duration: duration

说明：指定过渡效果所花费的时间
取值：
- <time>ms: 以毫秒为单位
- <time>s: 以秒为单位
默认值：0，表示没有过渡效果

transition-timing-function: timing-function

说明：指定过渡效果的速度曲线
取值：
- linear: 以相同的速度执行过渡效果
- ease: 以慢->快->慢的效果执行
- ease-in: 以慢->快的效果执行
- ease-out: 以快->慢的效果执行
- ease-in-out: 以慢->快->慢的效果执行
- cubic-bezier(<n>, <n>, <n>, <n>): 自定义速度曲线
默认值：ease

transition-delay: delay

说明：指定过渡效果延迟执行的时间
取值：
- <time>ms: 以毫秒为单位
- <time>s: 以秒为单位
默认值：0

transition: property duration timing-function delay

说明：
- 指定过渡效果，该属性为复合属性
- 多属性过渡效果需要将各过渡效果用逗号隔开(注意不是将属性隔开)
默认值：all 0 ease 0

过渡兼容

需要添加以下前缀
- -webkit-
- -o-
- -moz-
浏览器支持
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。(from w3cschool)

过渡事件

transitionend 事件

说明
- 在 css transition 结束后触发
- 若在过渡效果完成前移除该过渡，则不触发
- 若在过渡效果完成前设置元素 display: none ，则不触发
注意
- [1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 webkitTransitionEnd. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 transitionend.
- [2] 在 Opera 10.5 上实现 oTransitionEnd，从版本 12 开始实现 otransitionend，从版本 12.10 开始实现 transitionend.

过渡示例

html

<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  div:hover {
    width: 200px;
    height: 200px;
  }
  .example-transition {
    transition: width 1s linear, height 1s linear 2s;
    -o-transition: width 1s linear, height 1s linear 2s;
    -moz-transition: width 1s linear, height 1s linear 2s;
    -webkit-transition: width 1s linear, height 1s linear 2s;
  }
</style>

<body>
  <div class="example-transition"></div>
</body>

动画

可以自定义元素的表现形式

需要先定义 keyframes
定义动画效果使用的 keyframes 及相关的属性

定义 `keyframes`

css

@keyframes <name> {
    <keyframes-selector>: {
        <css-styles>
    }
}

name: 指定 keyframes 的名称
keyframes-selector
- 说明：keyframes 选择器，当前样式所在整个动画的百分比
- 取值
  - 0-100%
  - from: 同 0%
  - to: 同 100%
css-styles
- 说明：当前 keyframes-selector 下的样式属性
- 取值：一个或多个合法的 css 样式属性

动画属性

animation-name: name

说明：指定要绑定的 keyframes 名称
取值：
- <keyframes name>: 要绑定的 keyframes
- none: 无动画效果(可用于覆盖来自级联的动画)
默认值：none

animation-duration: duration

说明：指定动画效果所花费的时间
取值：
- <time>ms: 以毫秒为单位
- <time>s: 以秒为单位
默认值：0，表示没有动画效果

animation-timing-function: timing-function

说明：指定动画效果的速度曲线
取值：
- linear: 以相同的速度执行过渡效果
- ease: 以慢->快->慢的效果执行
- ease-in: 以慢->快的效果执行
- ease-out: 以快->慢的效果执行
- ease-in-out: 以慢->快->慢的效果执行
- cubic-bezier(<n>, <n>, <n>, <n>): 自定义速度曲线
默认值：ease

animation-delay: delay

说明：指定动画效果延迟执行的时间
取值：
- <time>ms: 以毫秒为单位
- <time>s: 以秒为单位
默认值：0s
注意：取值允许付负值，表示跳过指定时常的动画效果

animation-iteration-count: iteration-count

说明：指定动画的播放次数
取值
- <number>: 一个大于 0 的整数
- infinite: 表示无限重复该动画
默认值：1

animation-direction: direction

说明：指定动画是否轮流反向播放
取值
- normal: 表示该动画正常播放
- alternate: 表示该动画轮流反向播放；即在奇数次的动画正常播放，在偶数次的动画反向播放
默认值：normal

animation-fill-mode: fill-mode

说明：指定动画在播放之前或之后，其动画效果是否可见。
取值
- none: 不改变默认行为
- forwards: 保持动画最后一帧的样式
- backwards: 在 animation-delay 指定的一段时间内，使用第一帧的样式代替默认样式
- both: 向前和向后填充模式都被应用。
默认值：none
注意
- forwards 作用的是动画执行结束后元素的样式
- backwards 作用的是动画执行之前元素的样式!!!

animation: name dutation timing-function delay iteration-count direction fill-mode

说明
- 指定动画效果，该属性为复合属性
默认值：none 0 ease 0 1 normal
注意
- 需要按顺序配置对应属性(如果不清楚具体处理规则的话)
- 如果需要设置delay后面的属性，且不更改delay的默认值，务必将其值只为0s或0ms

animation-play-state: play-state

说明
- 指定动画的运行状态
- 该值也可以写在 animation 复合属性中，但是这样做没什么意义
取值
- running: 播放
- paused: 暂停
默认值：running

动画兼容

需要添加以下前缀
- -webkit-
- -o-
- -moz-
浏览器支持
- Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。(from w3cschool)

动画事件

animationstart 事件: 在 css 动画开始时触发，如果有 animation-delay, 则在延迟时长之后触发
animationiteration 事件: 在 css 动画迭代播放时触发，在 animation-iteration-count 为 1 的动画中不会触发
animationend 事件: 在 css 动画完成时触发，如果在动画完成前终止或设置元素 display: none 则不触发
animationcancel 事件: 在 css 动画被取消时触发

动画示例

css

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-100px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes bounce {
  ...;
}
@-moz-keyframes bounce {
  ...;
}
@-webkit-keyframes bounce {
  ...;
}
.animation-bounce {
  animation: bounce 3s linear 0s infinite normal forwards;
  -o-animation: bounce 3s linear 0s infinite normal forwards;
  -moz-animation: bounce 3s linear 0s infinite normal forwards;
  -webkit-animation: bounce 3s linear 0s infinite normal forwards;
}

过渡动画 ​

过渡 ​

过渡属性 ​

过渡兼容 ​

过渡事件 ​

过渡示例 ​

动画 ​

定义 keyframes ​

动画属性 ​

动画兼容 ​

动画事件 ​

动画示例 ​