如何使用css实现椭圆形的运动轨迹

惯例一张图 以下开始正文


我们都知道使用css的transformtransition以及animationkeyframes可以实现动画,但是,他们的动画路径都是以最短路径为路径的,那么我们应该如何让他们以其他路径为路径呢。如下图所示:

通过观察上图,大家可能会发现如果我们把X以及Y的动画曲线进行更改,那么便可以实现; html:

    <div class="dot"></div>

css:

   .dot {
      /* Some layout code… */
      animation: xAxis 2.5s infinite ease-in;
    }    
    .dot::after {
      /* Render dot */
      animation: yAxis 2.5s infinite ease-out;
    }

    @keyframes xAxis {
      50% {
        animation-timing-function: ease-in;
        transform: translateX(100px);
      }
    }

    @keyframes yAxis {
      50% {
        animation-timing-function: ease-out;
        transform: translateY(-100px);
      }
    }

以及 8字形的实现 html:

    .demo-dot {
      -webkit-animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
      animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
    }

    .demo-dot::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      -webkit-animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
      animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
    }

    @-webkit-keyframes yAxis {
      50% {
        -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
      }
    }

    @keyframes yAxis {
      50% {
        -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
      }
    }

    @-webkit-keyframes xAxis {
      50% {
        -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
      }
    }

    @keyframes xAxis {
      50% {
        -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
      }
    }

您可能已经注意到,@keyframes到目前为止,我们已经在所有示例中使用了块,但这纯粹是因为我们碰巧需要几个关键帧才能来回移动点。transition如果您只需要从点A到点B进行动画制作,分层动画的效果与该属性一样。

如果你有一个绝对定位的元素,你可以通过动画leftbottom单个元素的属性来实现一个曲线路径,并避免需要一个容器元素。但是,有一个很好的理由避免这样做:它的性能明显更差,并会触发动画每一帧的重绘。使用伪元素的分层动画和硬件加速translate属性的动画生成一个很好看的动画,同时确保它也表现良好。

本文源至http://tobiasahlin.com/blog/curved-path-animations-in-css/

阅读:
986
评论:
1
转载:
0
时间:
2017-11-27 09:39

123132131

回复于 2017-11-27 11:25

×你还没有登录,登陆后有更多特权喔!点我登录