专栏首页grain先森Css3 Animation 动画原则七

Css3 Animation 动画原则七

弧线运动 (Arc)

弧线运动

虽然对象是更逼真了,当它们遵循「缓入缓出」的时候它们很少沿直线运动——它们倾向于沿弧线运动。

我们有几种 CSS 的方式来实现弧线运动。一种是结合多个动画,比如在弹力球动画里,可以让球上下移动的同时让它右移,这时候球的显示效果就是沿弧线运动。

HTML
<h1>Principle 7: Arc (1)</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle sevena">
    <div class="shape-container">
      <div class="shape a"></div>
    </div>
</article>
CSS
.sevena .shape-container {
  animation: move-right 6s infinite cubic-bezier(.37,.55,.49,.67);
  position: absolute;
  left: calc(50% - 4em);
  top: calc(50% - 4em);
}
.sevena .shape {
  animation: bounce 6s infinite linear;
  border-radius: 50%;
  position: relative;
  left: auto;
  top: auto;
}

@keyframes move-right {
  0% {
    transform: translateX(-20em);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90%, 100% {
    transform: translateX(20em);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-8em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  15% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
  25% {
    transform: translateY(-4em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  32.5% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
  40% {
    transform: translateY(0em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  45% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
  50% {
    transform: translateY(3em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  56% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
  60% {
    transform: translateY(6em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  64% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
  66% {
    transform: translateY(7.5em);
    animation-timing-function: cubic-bezier(.51,.01,.79,.02);
  }
  70%, 100% {
    transform: translateY(8em);
    animation-timing-function: cubic-bezier(.19,1,.7,1);
  }
}

/* General styling */
body {
  margin: 0;
  background: #e9b59f;
  font-family: HelveticaNeue, Arial, Sans-serif;
  color: #fff;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 300;
}

h2 {
  font-size: 0.75em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

a {
  text-decoration: none;
  color: #333;
}

.principle {
  width: 100%;
  height: 100vh;
  position: relative;
}

.shape {
  background: #2d97db;
  border: 1em solid #fff;
  width: 4em;
  height: 4em;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
}

另一种弧线运动

旋件运动

另外一种是旋转元件,我们可以设置一个在对象之外的原点来作为它的旋转中心。当我们旋转这个对象,它看上去就是沿着弧线运动。

HTML
<h1>Principle 7: Arc (2)</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle sevenb">
    <div class="shape a"></div>
    <div class="shape b"></div>
</article>
CSS
.sevenb .shape.a {
  animation: sevenb 3s infinite linear;
  top: calc(50% - 2em);
  left: calc(50% - 9em);
  transform-origin: 10em 50%;
}
.sevenb .shape.b {
  animation: sevenb 6s infinite linear reverse;
  background-color: yellow;
  width: 2em;
  height: 2em;
  left: calc(50% - 1em);
  top: calc(50% - 1em);
}

@keyframes sevenb {
  100% {
    transform: rotateZ(360deg);
  }
}

/* General styling */
body {
  margin: 0;
  background: #e9b59f;
  font-family: HelveticaNeue, Arial, Sans-serif;
  color: #fff;
}

h1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 300;
}

h2 {
  font-size: 0.75em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

a {
  text-decoration: none;
  color: #333;
}

.principle {
  width: 100%;
  height: 100vh;
  position: relative;
}

.shape {
  background: #2d97db;
  border: 1em solid #fff;
  width: 4em;
  height: 4em;
  position: absolute;
  top: calc(50% - 2em);
  left: calc(50% - 2em);
} 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css3 Animation 动画原则六

    对象很少从静止状态一下子加速到最大速度,它们往往是逐步加速并在停止前变慢。没有加速和减速,动画感觉就像机器人。

    grain先森
  • Css3 Animation 动画原则一

    这是物体存在质量且运动时质量保持不变的概念。当一个球在弹跳时,碰击到地面会变扁,恢复的时间会越来越短。

    grain先森
  • Css3 Animation 动画原则二

    运动不倾向于突然发生。在现实生活中,无论是一个球在掉到桌子前就开始滚动,或是一个人屈膝准备起跳,运动通常有着某种事先的累积。

    grain先森
  • Here地图收购德国公司ATS,要用OTA技术解决自动驾驶难题

    近日,Here地图宣布将收购德国软件公司Advanced Telematic Systems(ATS),以此提高数据分配、更新和安全能力。 ATS总部在柏林,主...

    企鹅号小编
  • yandexbot ip列表整理做俄罗斯市场的站长可以关注一下

      这段时间ytkah在负责一个客户的网站,主要做俄罗斯市场,当然是要研究Yandex了,首先是要知道yandexbot的ip有哪些,本文通过分析这个站从201...

    ytkah
  • 【号码归属地查询工具】

    工具目录下的“Database”目录中的“phone_are.dat”文件不要删除,信息查询是基于该数据库进行的:

    用户6184845
  • 023.掌握Pod-Pod扩容和缩容

    Kubernetes对Pod的扩缩容操作提供了手动和自动两种模式,手动模式通过执行kubectl scale命令或通过RESTful API对一个Deploym...

    木二
  • 如何在Debian 8上安装和使用Composer

    Composer是一种流行的PHP依赖管理工具,主要用于促进项目依赖项的安装和更新。它将根据项目要求使用适当的版本检查特定项目所依赖的其他软件包并为您安装。

    物花无语
  • 实时流处理Storm、Spark Streaming、Samza、Flink对比

    分布式流处理需求日益增加,包括支付交易、社交网络、物联网(IOT)、系统监控等。业界对流处理已经有几种适用的框架来解决,下面我们来比较各流处理框架的相同点以及区...

    Albert陈凯
  • 当 AI 遇见体育

    体育分析是一个市场价值很大的产业,近年来异常火爆。本文简单科普了AI相关技术在体育产业的几个应用,希望能起到抛砖引玉的效果,吸引更多同学分享相关的资料。

    serena

扫码关注云+社区

领取腾讯云代金券