11. 变换和动画

结合两个伪元素::before和::after通过错位叠加的方式合并成一个心形。

• 声明
  的尺寸为一个正方形并以中心顺时针旋转45deg
• 声明两个伪元素继承
  的尺寸并实行绝对定位
• 声明两个伪元素的圆角率为100%并平移到相应位置

巧妙利用了transform将两个伪元素平移到相应位置产生叠加错觉。

.heart-shape { position: relative; width: 200px; height: 200px; background-color: #f66; transform: rotate(45deg); &::before, &::after { position: absolute; left: 0; top: 0; border-radius: 100%; width: 100%; height: 100%; background-color: #f66; content: “”; } &::before { transform: translateX(-50%); } &::after { transform: translateY(-50%); } }

---

• 在线演示：Here
• 在线源码：Here

  像素边框

  1px边框在桌面端网站看上去没什么大问题，但在移动端网站看上去却觉得很粗。由于大部分移动端都具有细腻的屏幕，像iPhone的Retina屏幕，一个像素可由4个点或9个点组成，在接近视网膜极限的情况下，1px边框看起来确实会有点粗。
  那么可声明0.5px边框吗。答案是可行的，即使声明成功，但有些浏览器还是按照1px的值去渲染，这样就导致不同设备的边框参差不齐了。
  换个思路，使用一个伪元素的边框去当作节点边框，声明border为1px并将其宽高声明成200%，最终效果是该节点的2倍大小，再通过声明transform:scale(.5)将该伪元素缩小到原来的0.5倍，现在和节点尺寸一致了，而border也通过浏览器自动计算成0.5px了，最终实现0.5px边框。其实现原理就是将边框宽度计算交由浏览器处理。
  
  
  1px
  0.5px
  
  .onepx-border { width: 200px; height: 80px; cursor: pointer; line-height: 80px; text-align: center; font-weight: bold; font-size: 50px; color: #f66; & + .onepx-border { margin-top: 10px; } &.normal { border: 1px solid #f66; } &.thin { position: relative; &::after { position: absolute; left: 0; top: 0; border: 1px solid #f66; width: 200%; height: 200%; content: “”; transform: scale(.5); transform-origin: left top; } } }

---

• 在线演示：Here

• 在线源码：Here

  内容翻转

  tranform 矩阵 transform 使用 矩阵进行计算，使用 负值时可以得到意想不到的效果
  遇到一些内容翻转的场景，有些同学可能会声明transform:rotate3d()将内容沿着Y轴旋转180deg水平翻转。
  其实可声明transform:scale()为负值将内容直接翻转，细心的同学应该注意到上述有谈到。

• 水平翻转：transform:scale(1,-1)

• 垂直翻转：transform:scale(-1,1)
• 倒序翻转：transform:scale(-1,-1)

<ul class="flip-content">
    <li>正常文本</li>
    <li class="x-axis">水平翻转</li>
    <li class="y-axis">垂直翻转</li>
    <li class="reverse">倒序翻转</li>
</ul>

.flip-content {
    li {
        position: relative;
        width: 121px;
        height: 51px;
        line-height: 51px;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        color: #f66;
        &::before,
        &::after {
            position: absolute;
            background-color: #66f;
            content: "";
        }
        & + li {
            margin-top: 10px;
        }
        &.x-axis {
            transform: scale(1, -1);
            &::after {
                left: 0;
                top: 25px;
                width: 100%;
                height: 1px;
            }
        }
        &.y-axis {
            transform: scale(-1, 1);
            &::after {
                left: 60px;
                top: 0;
                width: 1px;
                height: 100%;
            }
        }
        &.reverse {
            transform: scale(-1, -1);
            &::before {
                left: 0;
                top: 25px;
                width: 100%;
                height: 1px;
            }
            &::after {
                left: 60px;
                top: 0;
                width: 1px;
                height: 100%;
            }
        }
    }
}

• 在线演示：Here

• 在线源码：Here

  过渡

  有时在不同状态间切换属性可能会显得很生硬，此时transition就派上用场了，它能让状态间的切换变得更丝滑。

• transition-property：属性

  • all：全部属性过渡(默认)
  • none：无属性过渡
  • String：某个属性过渡
• transition-duration：时间
  • Time：秒或毫秒(默认0)
• transition-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]区域内
• transition-delay：时延
  • Time：秒或毫秒(默认0)

总体来说，transition可用到所有可能发生属性变更的节点上，但有一些情况是绝对不能使用的。transition延缓某些属性的变更过程，若通过鼠标事件给某个节点属性赋值，会导致属性在变更过程中发生卡顿。
例如通过鼠标的mousemove事件将top从10px变更到20px。由于声明了transition:300ms，那么从10px变更到11px时会将该过程延缓300ms，导致了该过程的执行时长是300ms，而此刻想要的效果是瞬间从10px变更到11px，再依次变更到20px。整个过程是鼠标移动就立刻赋值，这样才能实时显示top的变化，而声明了transition反而起到副作用导致看上去很卡顿。
由于duration和delay的取值都是时间，所以可能会发生混淆。

• duration和delay作用于所有节点，包括自身的::before和::after
• transition中出现两个时间值时，第一个解析为duration，第二个解析为delay
• transition中出现一个时间值时，解析为duration

缓动函数其实就是贝塞尔曲线，相关原理可自行百度。推荐一个设置缓动函数形状的网站CubicBezier，可根据需求设置想要的缓动函数。

还记得第9章选择器的切换按钮的刹车动画吗？点击按钮后，圆点从左到右有一个细微的刹车动画，这个不是通过JS捣鼓出来的，而是笔者细心地调制了一个缓动函数cubic-bezier(.4,.4,.25,1.35)实现的。具体实现可通过笔者推荐的网站自行调制喔。

动画

上述transform能让节点拥有更多形态，而animation能让节点拥有更多状态。正是有了animation，所以才让交互效果更精彩。
CSS动画可通过设置多个点精确控制一个或一组动画，用来实现复杂的动画效果。
动画由多个点组成，每个点拥有独立的状态，这些状态通过浏览器处理成过渡效果，点与点间的过渡效果串联起来就是一个完整的动画。
animation可声明的两种动画，每种动画各有自身特点。

• 关键帧动画：在时间轴的关键帧上绘制关键状态并使之有效过渡组成动画
• 逐帧动画：在时间轴的每一帧上绘制不同内容并使之连续播放组成动画

关键帧动画可看作是一个连续的动画片段，逐帧动画可看作是一个断续的动画片段，两种动画都是通过时间流逝将多个动画片段串联在一起。浏览器可将关键帧动画的关键帧自动过渡成片段，而将逐帧动画的每一帧按顺序播放成片段，可认为逐帧动画是一个GIF。

• 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()声明。总体来说，逐帧动画的声明比较简单，可用一张逐帧长图完成整个动画效果，而关键帧动画需结合@keyframes为每个关键帧声明当前对应的状态，若涉及的点较多，可能比较繁琐。
关键帧动画声明步骤

• 在@keyframes里声明动画名称和动画每个关键帧的状态
• 动画名称不能重复否则会被覆盖，关键帧通过百分比分割出每个关键帧并声明对应的状态
• 在指定节点中声明animation调用动画

逐帧动画声明步骤

• 准备一张逐帧长图，该图像包含动画效果的每一帧且每帧宽高必须一致
• 在steps()里声明逐帧长图及其展示方式
• 在指定节点中声明animation调用动画

@keyframes注意事项
关键帧动画的声明通过@keyframes完成，编写形式如下。
@keyframes animation-name { from {} to {} } / 或 / @keyframes animation-name { p1 {} p2 {} p3 {} }
关键帧的取值必须是from、to或Percentage。from可用0%代替，to可用100%代替，若开始或结束的关键帧无对应的状态，可不用声明from或to。0%的%不能省略，否则关键帧解析会失败。
后面声明的关键帧状态会覆盖前面声明的关键帧状态，动画结束后会回到animation-fill-mode声明的状态。

自动打字器

很多在线编辑器网站都有一些自动打字的效果，例如CodePen。很多同学都以为是JS实现的效果，其实查看Chrome Devtools发现是纯CSS实现的。观察多几次自动打字器，可发现其存在以下特点。

• 字体都是等宽字体，等宽字体可保证每次打字时光标的移动距离都是一致的
• 打字器的宽度由最初的0px逐渐增加内容后变成最终固定字数的宽度，宽度以等宽字体的个数为准
• 光标随着每打一个字就闪烁一次，打字速度均匀，打字完成后再次重复打字
• 整个打字过程存在两个动画，一个是打字器自增宽度，一个是光标闪烁
• 整个打字过程一闪一闪地完成，根据其断断续续的特点可判断该动画为逐帧动画

还记得第5章样式计算的长度单位吗？有一个叫做ch的长度单位，它是一个等宽字体的特有长度单位，准确宽度为0的宽度。因此一个等宽字体就是1ch，两个等宽字体就是2ch。通过等宽字体个数定制打字器长度最合适不过了，而常用的设备自带等宽字体有Consolas、Monaco和Monospace三种。
打字器自增宽度可用0px到等宽字体指定个数的宽度nch为一个自增周期，使用动画完成其自增过程即可。
光标闪烁可用border-right模拟，具体形象现在可脑补一下，有无想出什么效果？节点里包含文本，在最右边声明border-right，那不就是一个具有静态光标的输入状态吗？文本右边就是光标，很符合常理，为border-right声明一个闪烁动画即可。

<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>

// scss 
@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;
    }
}

• 在线演示：Here
• 在线源码：Here