css转换与动画基础

无悔欧
188 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

css变换与动画

在以前，一些简单的交互需要使用JS才能完成，使用原生JS写交互确实很麻烦，但使用JQuery封装好的交互函数就简单多了。

如今css3发布后，也增加了transform,transition和animation三大交互属性。

变换

变换包括2D变换与3D变换。2D变换在平面中操作，3D变换在空间中操作，2D与3D的概念相信很多同学都知道。变换可理解为将节点复制一份并生成新图层，原节点隐藏，在新图层中使用新节点进行变换操作。

选择2D与3D之间的转换，需要声明transform-style属性

flat： 所有变换效果在平面中呈现（默认）

preserve-3d： 所有变换效果在空间中呈现

transform包括了六大函数

translate()： 位移

函数：

  • translate(x,y) ：2D位移
  • translate3d(x,y,z) ：3D位移
  • translateX(x) ：X轴位移，等同于translate(x,0)或translate3d(x,0,0)
  • translateY(y) ：Y轴位移，等同于translate(0,y)或translate3d(0,y,0)
  • translateZ(z) ：Z轴位移，等同于translate3d(0,0,z)
scale()： 缩放

函数:

  • scale(x,y) ：2D缩放
  • scale3d(x,y,z) ：3D缩放
  • scaleX(x) ：X轴缩放，等同于scale(x,1)或scale3d(x,1,1)
  • scaleY(y) ：Y轴缩放，等同于scale(1,y)或scale3d(1,y,1)
  • scaleZ(z) ：Z轴缩放，等同于scale3d(1,1,z)
skew()： 扭曲

函数：

  • skew(x,y) ：2D扭曲
  • skewX(x) ：X轴扭曲，等同于skew(x,0)
  • skewY(y) ：Y轴扭曲，等同于skew(0,y)
rotate()： 旋转

函数：

  • rotate() ：2D旋转
  • rotate3d(x,y,z,a) ：3D旋转，[x,y,z]是一个向量，数值都是0~1
  • rotateX(a) ：X轴旋转，等同于rotate(1,0,0,a)，正值时沿X轴向上逆时针旋转，负值时沿X轴向下顺时针旋转
  • rotateY(a) ：3D Y轴旋转，等同于rotate(0,1,0,a)，正值时沿Y轴向右逆时针旋转，负值时沿Y轴向左顺时针旋转
  • rotateZ(a) ：3D Z轴旋转，等同于rotate(0,0,1,a)，正值时沿Z轴顺时针旋转，负值时沿Z轴逆时针旋转

还有两个分别是matrix() 矩阵 和 perspective() : 视距 使用比较少，可以了解一下

动画

CSS动画通过设置多个点精确控制一个或一组动画，用于实现复杂的动画效果。

动画由多个点组成，每个点拥有独立状态，这些状态通过浏览器处理为过渡效果，点与点间的过渡效果串联起来就是一个完整的动画。

animation可声明的两种动画

关键帧动画: 在时间轴的关键帧中绘制关键状态并使之有效过渡组成动画

逐帧动画: 在时间轴的每帧中绘制不同内容并使之连续播放组成动画

animation包括八个子属性，每个子属性包括以下参数。

  • animation-name

    ：名称

    • none：无动画(默认)
    • String：动画名称

  • animation-duration

    ：持续时间

    • Time：秒或毫秒(默认0)

  • animation-timing-function

    ：缓动函数

    • ease：逐渐变慢，等同于cubic-bezier(.25,.1,.25,1)(默认)
    • linear：匀速，等同于cubic-bezier(0,0,1,1)
    • ease-in：加速，等同于cubic-bezier(.42,0,1,1)
    • ease-out：减速，等同于cubic-bezier(0,0,.58,1)
    • ease-in-out：先加速后减速，等同于cubic-bezier(.42,0,.58,1)
    • cubic-bezier：贝塞尔曲线，(x1,y1,x2,y2)四个值指定曲线中的点P1与P2，所有值需在[0,1]区域内
    • steps([,[start|end]]?)：把动画平均划分成n等分，直到平均走完该动画
    • step-start：等同于steps(1,start)，把动画分成一步，动画执行时以左侧端点0%为开始
    • step-end：等同于steps(1,end)，把动画分成一步，动画执行时以右侧端点100%为开始

  • animation-delay

    ：等待时间

    • Time：秒或毫秒(默认0)

  • animation-iteration-count

    ：播放次数

    • Number：数值(默认1)
    • infinite：无限次

  • animation-direction

    ：轮流反向播放(播放次数为一次则该属性无效果)

    • normal：正常播放(默认)
    • alternate：轮流反向播放，奇数次数正常播放，偶数次数反向播放

  • animation-play-state

    ：播放状态

    • running：正在播放(默认)
    • paused：暂停播放

  • animation-fill-mode

    ：播放前后其效果是否可见

    • none：不改变默认行为(默认)
    • backwards：在等待时间内或在动画开始前应用开始属性(在第一个关键帧中定义)
    • forwards：在动画结束后保持最后一个属性(在最后一个关键帧中定义)
    • both：向前与向后填充模式都被应用

关键帧动画必须通过animation与@keyframes声明，逐帧动画只能通过animation-timing-function：steps()声明。

自动打字器动画效果
<div class="auto-typing">Welcome to the beautiful Dali, Yunnan Province</div>

@mixin typing($count: 0, $duration: 0, $delay: 0) {
    overflow: hidden;
    border-right: 1px solid transparent;
    width: #{$count + 1}ch;
    font-family: Consolas, Monaco, monospace;
    white-space: nowrap;
    animation: typing #{$duration}s steps($count + 1) #{$delay}s infinite backwards,
        caret 500ms steps(1) #{$delay}s infinite forwards;
}
.auto-typing {
    font-weight: bold;
    font-size: 30px;
    color: #09f;
    @include typing(52, 5);
}
@keyframes caret {
    50% {
        border-right-color: currentcolor;
    }
}
@keyframes typing {
    from {
        width: 0;
    }
}
avatar
文章
阅读
粉丝