CSS 动画
一、使用 animation 和 @keyframes
二、使用 transition 属性
/** * css3 动画 * 使用 @keyframes规则与 animation * @keyframes规则用于创建动画，在 @keyframes中规定某项 css样式，就能创建由当前样式逐渐改为新样式的动画 * 若在某个时间点有多个动画指定同一属性行为，则在最后出现并应用的动画将覆盖其他动画。 * Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 */// 属性 描述// @keyframes 用于规定动画。 // 如: @keyframes myAnimationName { code... }// animation 所有动画属性的简写属性，除了 animation-play-state 属性。 // 如: animation: name duration timing-function delay iteration-count direction;// animation-name 规定 @keyframes 动画的名称。 // 如: animation-name: myAnimationName// animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 // 如: animation-duration: 2s/2000ms// animation-timing-function 规定动画的速度曲线。默认是 "ease"。 // 如: animation-timing-function: cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1) cubic-bezier 函数详情: https://www.w3.org/TR/css-easing-1/#typedef-timing-function// animation-delay 规定动画何时开始。默认是 0。 // 如: animation-delay: 2s/2000ms/-2s/-2000ms 使用负值动画会马上开始，但会跳过对应的 s/ms 数// animation-iteration-count 规定动画被播放的次数。默认是 1。 // 如: animation-iteration-count: n/infinite(无数次播放)// animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 // 如: animation-direction: alternate(动画在奇数次数正常播放,如 1、3、5...，在偶数次数反向播放，如 2、4、6...)// animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 // 如: animation-play-state: paused(如利用该属性通过 js代码在动画播放过程中暂停动画)// animation-fill-mode 规定对象动画时间之外的状态。默认 none// 如: animation-fill-mode: forwards(动画完成是,保持最后一个属性,即停在最后一个关键帧)/backwards(定义在 animation-delay时间内要用到的属性,即第一个关键帧)/both(应用 forwards和 backwards) 代码示例：
css animation hello world
示例结果：
/** * 使用 transition 属性 */ // 值 描述// transition-property 规定设置过渡效果的 CSS 属性的名称。默认 all(所有属性获得过渡效果)// 如: transition-property: width,property2,...propertyN|none(没有属性会获得过渡效果)// transition-duration 规定完成过渡效果需要多少秒或毫秒。默认 0s(意味着不会有任何效果)// 如: transition-duration: 2s/2000ms// transition-timing-function 规定速度效果的速度曲线。默认 ease// 如: transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(a,b,c,d); 其中 p0(0,0),p1(a,b),p2(c,d),p3(1,1)// transition-delay 定义过渡效果何时开始。默认 0s// 如: transition-delay: 2s/2000ms
代码示例：
css transition
示例结果：
