过渡与动画

Frank
  • 前端基石
  • CSS3
  • 过渡
  • 动画
大约 4 分钟约 1260 字...

过渡

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 的初始值时:

当不设置left的初始值时

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

添加之后:

初始时添加上left值

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

动画

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 动画库

过渡与动画的对比

transition 过渡

  • 令一个或多个可以用数值表示的 css 属性值发生变化时产生过渡效果;
  • 触发条件:需要触发一个事件,比如鼠标触发等。
  • 精确性:只能设定头尾,设置过渡属性没有中间的过程,动画是一步到位。
  • 循环:只能触发一次,不能产生重复发生动画。

animation 动画

  • 可设置多个关键帧,实现自由动画。
  • 触发条件:不需要触发任何事件也可随时间变化达到一种动画效果。
  • 精确性:支持多帧动画效果,可绘制复杂动画。
  • 循环:可以反复执行动画,支持正向逆向及交替运行。

应用场景分析

transition 过渡

如果要简单的 from to 效果,用 transition。比如简单的按钮动画。

animation 动画:

如果要灵活定制多个帧以及循环,用 animation。比如变色效果。

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1