过渡与动画

Mr.Chen大约 6 分钟约 1809 字

过渡

transition 过渡属性是 CSS3 浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画"

兼容性

过渡从 IE10 开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由 Javascript 定时器实现的，现在逐步改为使用 CSS3 过渡
优点：动画更细腻，内存开销小

基本使用

transition: width 1s linear 0s;

参数

transition: all 1s cubic-bezier(0.46, 1.02, 0.49, -0.86) 0s;

1:什么属性要过渡 2：动画时长 3：变化速度曲线 4：延迟时间

如果要所有属性都参与过渡，可以写 all
transition 的第三个参数就是缓动参数，也是变化速度曲线
网站https://cubic-bezier.com/open in new window可以生成贝塞尔曲线，可以自定义动画缓动参数

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如 Width、 height、left、top、 border- radius、 opacity
背景颜色和文字颜色都可以被过渡
所有变形（包括 2D 和 3D）都能被过渡

注意项

过渡与动画的时间要写单位

transition 属性中的过渡时间 transition-duration、延时时间 transition-delay，animation 属性中的动画时间 animation-duration、动画延时时间 animation-delay 都需要写单位，不写则会没有过渡、动画效果。

最好设置初始状态

部分需要过渡的属性，如果不设置初始状态，会没有过渡效果以 left 值为例，当不设置 left 的初始值时：

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: black;
  /* 初始时，添加上left值 */
  left: 0;
  transition: all 1s linear 0s;
}
.box:hover {
  left: 200px;
}

添加之后：

过渡要定义在元素的开始状态上，而不是结束状态上

动画

animationopen in new window

动画的定义和调用

可以使用@ keyframes 来定义动画， keyframes 表示“关键帧”

@keyframes r {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

定义动画之后，就可以使用 animation 属性调用动画

animation: r 1s linear 0s 1;

从左到右依次为：动画名称，总时长，缓动效果，延迟，执行次数

对应属性名称:animation-name，animation-duration, animation-timing-function，animation-delay

animation-iteration-count

第5个参数定义动画在结束前运行的次数可以是 1 次无限循环.

animation: r 1s linear 0s infinite;

infinite:无限循环播放动画

animation-direction

第6个参数CSS 属性指示动画是否反向播放

animation: r 1s linear 0s infinite reverse;

如果想让动画的第 2、4、6…（偶数次）自动逆向执行，使用 alternate 参数即可

animation-fill-mode

第7个参数设置 CSS 动画在执行之前和之后如何将样式应用于其目标

animation: r 1s linear 0s 1 reverse forwards;

如果想让动画停止在最后结束状态，那么要加上 forwards

animation-play-state

第8个参数定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

animation-play-state: running;
/* 暂停  */
animation-play-state: paused;

多关键帧动画

@keyframes bgColor {
  0% {
    background-color: rgb(219, 157, 157);
  }
  20% {
    background-color: rgb(1, 19, 34);
  }
  40% {
    background-color: rgb(94, 255, 0);
  }
  60% {
    background-color: rgb(0, 17, 255);
  }
  80% {
    background-color: rgb(217, 255, 0);
  }
  100% {
    background-color: rgb(234, 0, 255);
  }
}

Animate.css

Animate.css是强大的跨平台的预设 css3 动画库

Animate.css 中文网