CSS3 动画之2D动画基础

908 阅读4分钟

CSS3如何改变了我的职业轨迹

  • 15年之前:Java开发工程师、项目经理

    • 当时前后不分家,没怎么重视前端技术的发展,主要使用HTML、CSS、ajax,Form、Table基本就够了,后来做富客户端,使用#C
  • 15年之后:前端开发工程师

    • 正好赶上H5发展的黄金时期,看到大量的H5页面才愕然发现CSS竟然可以实现各种眼花缭乱的效果(起初还以为是Flash做的),被深深吸引,记得当初为了写一个动画效果,写了一夜,当效果呈现时,激动的心情仿佛恋爱的般的甜蜜,此情此景,我想做首诗...
    • 因此,毅然放弃原有的职位和积累,从谋求一个前端小白职位开始...
  • 废话不多说,正文开始...

transform 变换

developer.mozilla.org/zh-CN/docs/…

  • 旋转,缩放,倾斜或平移给定元素。通过修改CSS视觉格式化模型的坐标来实现的
  • 同时支持改变css的其他属性,比如width、background等,通常使用,建议给元素设置脱离文档流(postion),防止引起整体重绘或重排,

5f3a3cbc-9596-4584-b63b-e27917d9efc4.png

  • 注意:复合变换按从右到左的顺序

transition 过渡

API

  • developer.mozilla.org/zh-CN/docs/…

  • 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果,比如宽度从100过渡到300

    • transition-property 过渡的CSS属性,比如 width 或者 所有变动all
  • transition-duration 过渡过程时间(秒或毫秒)
  • transition-timing-function 用来描述这过渡的加速度曲线(贝塞尔曲线

98e6713a-d99b-43e8-a22a-de94171e15aa.png

b088eadd-ad9d-4507-9bb5-fa6aee45abd9.png

  • cubic-bezier(, , , ),我们需要关注的是 P1 和 P2 两点的取值,而其中 X 轴的取值范围是 01,当取值超出范围时 cubic-bezier 将失效;Y 轴的取值没有规定,当然也无需过大
  • transition-delay 过渡延迟时间
div {

    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
div:hover {
    width: 300px;
}

小示例

滑动按钮

滑动按钮.gif

卷边效果

屏幕录制2021-09-09-下午4.04.51.gif

幽灵按钮

屏幕录制2021-09-09-下午4.31.49.gif

animation 动画

API

  • 与transition区别

    • transition 是一次性动画,animation 可以控制动画次数
    • transition 是A状态 到 B状态的属性变化过渡,中间过程是无法控制的,比如我要 A-B-C 怎么办?
  • developer.mozilla.org/zh-CN/docs/…

  • animation 用来指定一组或多组动画,每组之间用逗号相隔

    • animation-name: 动画名称,代表一个由@keyframes定义的动画序列
  • animation-duration: 动画时间 (秒或毫秒)
  • animation-timing-function: 是控制状态变化的时间属性(作用于每两个关键帧之间,而不是整个动画)同transition相比,多了关键帧动画 (step-start、step-edn)
  • animation-delay: 动画延迟时间开始(秒),允许负值

    • 默认0 : 立即执行动画
  • 正值 : 延时指定时间后,开始执行动画
  • 负值 : 立即执行,但跳过指定时间后进入动画
  • animation-iteration-count: 定义动画的播放次数,infinite 表示无限循环
  • animation-direction: 定义动画是应该向前,向后还是以交替周期播放 normal/alternate/reverse,假设动画 A -> B

    • normal: 每次动画都从初始状态A开始,A -> B
  • animation-fill-mode: 设置CSS动画在执行之前和之后如何将样式应用于其目标

    • none:动画结束时,回到动画还未开始前的状态
  • forwards:动画停留在结束时的状态
  • backwards:动画回到第一帧的状态
  • both:根据 animation-direction 轮流应用 forwards 和 backwards 规则
  • animation-play-state: 定义一个动画是否运行或者暂停,running / paused
  • keyframses 动画序列

    • from {} to {}
  • x1%, x2% {} x3% {}

小示例

基础动画

屏幕录制2021-09-10-下午3.09.58-1.gif

.box {
  width: 200px;
  height: 100px;
  background: red;
  animation-delay: 5s;
  margin: 10px;
}

.a1 {
  /*动画名称 每一次动画2s 匀速 延迟2s file-mode*/
  -webkit-animation: boxan 2s linear 2s 2 none;
}

.a2 {
  -webkit-animation: boxan 2s linear 2s 2 forwards;
}

.a3 {
  -webkit-animation: boxan 2s linear 2s 2 backwards;
}

.a4 {
  -webkit-animation: boxan 2s linear 2s 2 alternate;
}

.a5 {
  -webkit-animation: boxan 2s linear 2s 2 reverse;
}

@-webkit-keyframes boxan {
  0% {
    -webkit-transform: translateX(0);
    background: yellow;
  }

  50% {
    -webkit-transform: translateX(40px);
  }

  100% {
    -webkit-transform: translateX(100px);
    background: blue;
  }
}

animation-delay

xec29-v574r.gif

设置border的颜色

屏幕录制2021-09-10-下午4.00.28.gif

loadingExp

屏幕录制2021-09-10-下午4.07.21.gif

shake 抖动

屏幕录制2021-09-10-下午5.01.11.gif

<div class="dt attack"></div>

.dt {
  background: pink;
  width: 150px;
  height: 200px;
  margin: 100px auto;
}

.attack {
  animation: shake 1s infinite;
}

@keyframes shake {
  0% {
    transform: translateY(0);
  }

  7.5% {
    transform: translateY(-20px) rotate(-10deg);
  }

  15% {
    transform: translateY(-20px);
  }

  22.5% {
    transform: translateY(-20px) rotate(10deg);
  }

  30% {
    transform: translateY(-20px) rotate(-3deg);
  }

  50% {
    transform: translateY(0);
  }
}

参考资料