# 弧线运动 (Arc)

##### 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 动画原则六

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

• ### Css3 Animation 动画原则一

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

• ### Css3 Animation 动画原则二

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

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

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

• ### yandexbot ip列表整理做俄罗斯市场的站长可以关注一下

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

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

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

• ### 023.掌握Pod-Pod扩容和缩容

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

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

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

• ### 实时流处理Storm、Spark Streaming、Samza、Flink对比

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

• ### 当 AI 遇见体育

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