transform，transition，animation的混合使用——进阶

2021-11-21 23:09:00

今天我们来讲述css3能够做成动画的最小独立单元,并且讲述如何使用这些独立的单元来构成一个‘高大尚’的组合动画。

这是我在网上找的一个案例，修改后的效果图，虽说不是特别的‘高大尚’，但我认为这也跟高大尚占了一点了，中间的菜单按钮就是我们在做responsive开发时会用的到的效果，这是一个六边形的菜单，每个正三边形中的鼠标滑过出现的文字效果也是我们常见到的产品推荐的鼠标滑过的一种形式。
稍后，我也会介绍如何一步一步的做出这样高端大气的css动画。

transform，transition，animation的混合使用——进阶
组合动画效果

‘万丈高楼平地起’，‘千里之行，始于足下’，成功没有捷径，所以，我就在废话一下，来讲一讲我对css动画的理解，以及我自己形成的一套关于写css动画的方案。

首先，我们来讲一讲构成动画的最小独立单元的分类

1.transform2d或者transform3d（这类动画必须要事件触发）
2.animation
3.transition (这类动画必须要事件触发)

tranform2d，transform3d

transform是变形动画，2d类的动画沿着x轴和y轴的变化，3d动画仅x值的变化使得动画在yz所形成的平面内的变化，仅y值的变化使得动画在xz所形成的平面内的变化，仅z值的变化使得动画在xy所形成的平面内的变化，如果是x,y值同时变化，则形成的是在x轴上的变化，如果是x,z值同时变化，则形成的是在y轴上的变化，如果是y,z值同时变化，则形成的是在x轴上的变化，如果是x,y,z的值都变化，则形成的是关于空间中的一点上（0,0,0）做变化。

transiton

这个是一个在执行的过程中声明关键帧的动画，可以一旦元素的属性发生变化就可以形成一个动画，然后transition-property，transition-duration，transition-timing-function，transition-delay来设置动画的属性

animation

通过@keyframes 来设置关键帧，在没个关键帧中设置在该帧动画中某个元素的一个或几个属性的变化。animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction来设置动画的属性

这些内容做过css动画的人都有一定的理解，这个也不需要我来赘述，已经很熟悉的同学可以略过，不深了解的同学还请在看这篇文章之前打好基础。

首先，我们来一起学习一下按钮的动画效果，

transform，transition，animation的混合使用——进阶
menu动画效果

这里用的是css3的伪类：hover，对于有一段时间开发经验的同学来说，改为用用click事件来实现就简单多了，下面送上我写的代码：

html代码如下：

<div class="menu-outer">
    <span class="menu"></span>
</div>

css代码如下（css3浏览器兼容性不考虑）：

.menu-outer {
  position: relative;
  display: inline-block;
  margin: 30px;
  width: 20px;
  height: 24px;
  cursor: pointer;
}
.menu-outer:hover .menu {
  background-color: transparent;
}
.menu-outer:hover .menu::before {
  transform: translateY(8px) rotate(45deg);
}
.menu-outer:hover .menu::after {
  transform: translateY(-8px) rotate(-45deg);
}

.menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  padding: 8px 0;
  transform: translate(-50%, -50%);
  background-clip: content-box;
  background-color: #585247;
}
.menu::after, .menu::before {
  position: absolute;
  left: 0;
  display: inline-block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #585247;
  transition: transform 0.3s, background-color 0.3s;
}
.menu::before {
  top: 0;
}
.menu::after {
  bottom: 0;
}

其次，来看看菜单选项的鼠标移入动画，这种动画在鼠标移入后背景透明的发生变化，背景颜色变黑，文字会由左边切入，并且带有弹性碰撞效果，这种效果，我们在很多场合见到，比如说，产品栏目中……

transform，transition，animation的混合使用——进阶
产品介绍效果的动画

html代码

<div class="mouse-in">
    <a href="javascript:;">
        ![](./img/l-logo.jpg)
        <h2 class="l-logo">logo</h2>
        <p>源自世界的logo</p>
    </a>
</div>

css代码（css3浏览器兼容性不考虑）：

.mouse-in {
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 160px;
    margin: 60px;
    border-radius: 10%;
    perspective: 500px;
    transform-origin: 0 0;
    transition: background-color 0.3s;
}

.mouse-in img {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
}

.mouse-in h2,
.mouse-in p {
    position: absolute;
    padding: 0 16px;
    color: #fff;
    opacity: 0;
    transform: translate3d(-160px, 0, -160px);
}

.mouse-in h2 {
    bottom: 50%;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
    transition: transform 0.3s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s;
}

.mouse-in p {
    top: 50%;
    font-size: 14px;
    transition: transform 0.3s 0.1s cubic-bezier(0, 2.3, 0.8, 1), opacity 0.3s 0.1s;
}

.mouse-in:hover {
    background: #000;
}

.mouse-in:hover h2,
.mouse-in:hover p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.mouse-in:hover img {
    opacity: 0.4;
}

等边三角形（非动画）要显示一个正三边形，我的方法是将一个长方形扭曲为一个正菱形，以菱形的左上角为原点进行旋转，可以得到一个旋转30度后的菱形，然后在菱形中添加一个长方形宽度为菱形的边长，高度为菱形的中垂线高度，然后逆时针旋转60deg即可，再然后在这个长方形内添加一张图片即可，最后设置菱形的overflow属性为hidden，即可看到一个正三边形

HTML代码：

<div class="l-box">
    <div class="regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
            </a>
        </div>
    </div>
</div>

css代码：

.l-box {
  position: relative;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  margin: 150px;
}

.regular-triangle {
  position: relative;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 129.90381px;
  height: 150px;
  transform-origin: 0 100%;
  transform: skewY(-30deg);
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 86.60254%;
  transform-origin: 0 0;
  transform: skewY(30deg) rotate(30deg);
}

.clip img {
  width: 150px;
  height: 150px;
}

用六个正三边形组成一个正六边形，然后将正三边形以此旋转0，60,120,180,240,300deg,即可得到如下图形

<div class="l-box l-list">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>1</span>
            </a>
        </div>
    </div>

    <div class="l-list-item regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>2</span>
            </a>
        </div>
    </div>

    <div class="l-list-item regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>3</span>
            </a>
        </div>
    </div>

    <div class="l-list-item regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>4</span> 
            </a>
        </div>
    </div>

    <div class="l-list-item regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>5</span>
            </a>
        </div>
    </div>

    <div class="l-list-item regular-triangle">
        <div class="clip">
            <a href="#">
                ![](./img/bg.jpg)
                <span>6</span>
            </a>
        </div>
    </div>

</div>

css代码：

.l-list-item:nth-child(1){
    transform: rotate(0) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(2){
    transform: rotate(60deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(3){
    transform: rotate(120deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(4){
    transform: rotate(180deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(5){
    transform: rotate(240deg) skewY(-30deg) translate(10%, -10%);
}

.l-list-item:nth-child(6){
    transform: rotate(300deg) skewY(-30deg) translate(10%, -10%);
}
transform，transition，animation的混合使用——进阶
正六边形

除了以上稍微复杂的transition，transform，animation的组合动画，还有一种是svg smil(同步多媒体集成语言) animation动画,下面我们举其中的路径动画(路径动画这种形式是css3动画所不具有的)，效果图如下。

transform，transition，animation的混合使用——进阶
svg动画

html代码如下：

<svg viewbox="0 0 100 100" width="50" height="50">
    <polygon points="50 2 7 26 7 74 50 98 93 74 93 26" fill="transparent" stroke-width="4" stroke="#585247" stroke-dasharray="0,0,300" />
</svg>

css代码如下：

svg{
    margin: 150px;
}
svg polygon:hover{
    animation: svgHover 0.7s;
    cursor: pointer;
}

@keyframes svgHover {
    0% {
        stroke-dasharray: 0, 0, 300;
    }
    10% {
        stroke-dasharray: 0, 20, 300;
    }
    100% {
        stroke-dasharray: 300, 20, 300;
    }
}

svg动画想必我们看过的很多如iconfont网站首页笑脸动画，以及背景的流星动画，还有纸飞机动画。

导航动画

transform，transition，animation的混合使用——进阶
导航动画

演示地址：https://lvzhenbang.github.io/css3-animate/transition-nav.html

web前端添加了动画后，我们会发现我们所做的页面瞬间就增色不少。后续文章敬请期待！

本文的源代码和其他一些动画案例下载地址https://github.com/lvzhenbang/css3-animate，如果喜欢就为我添加一个星星，多多关注我一下

上一篇：浮动的label


下一篇：transform，transition，animation的混合使用——高手