css动画设置运动轨迹,css3动画之圆形运动轨迹

ゝ一世哀愁。 2022-09-02 14:58 770阅读 0赞

![c4468b3f4df77e96b0a416fa2a870fba.png][]

css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效果；

在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。

animation

animation作为一个复合属性，包括了以下动画属性。

animation-name -------------------------------------规定动画名称

animation-duration ---------------------------------规定动画完成一次的时间

animation-timing-function  ----------------------规定动画的运动速度曲线

animation-delay  ------------------------------------规定动画的延迟时间

animation-iteration-count  -----------------------规定动画的播放次数

animation-direction   ------------------------------规定动画下一周期是否逆向开始

animation-fill-mode  -------------------------------规定动画时间之外的状态

animation-play-state  ------------------------------规定动画的运行和暂停

animation-timing-function

规定动画的速度曲线。默认是 "ease"。常用的运动速度曲线还有以下几种：

linear：线性过渡。

ease-in：由慢到快。

ease-out：由快到慢。

ease-in-out：由慢到快再到慢。

也可以直接使用贝塞尔曲线规定运行的速度曲线，贝塞尔曲线的4个数值需在\[0, 1\]区间内。

animation-direction

规定动画是否在下一周期逆向播放。默认是 "normal"。

reverse:反方向运动

alternate:先正常方向再反方向运动，持续交替

alternate-reverse:先反方向再正常方向运动，持续交替

animation-fill-mode

规定对象动画时间之外的状态。常用值如下：

none:默认值

forwards:设置对象状态为动画结束时的状态

backwards:设置对象状态为动画开始时的状态

圆形运动轨迹

实现代码如下：

沿圆形轨迹运动

\*\{margin:0;padding:0;

\}html,body\{height:100%;

\}\#trajectory\{width:300px;height:300px;border:4px solid \#949494;border-radius:50%;position:relative;left:calc(50% - 153px);top:calc(50% - 153px);

\}@keyframes moveX\{0% \{left:-22px;\}100%\{left:282px;\}\}

@keyframes moveY\{0% \{top:-22px;\}100%\{top:282px;\}\}

\#move\{width:40px;height:40px;font-size:12px;background-color:\#32c33a;border-radius:50%;position:absolute;left:-22px;top:-22px;animation:moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;

\}

Immortal brother

[c4468b3f4df77e96b0a416fa2a870fba.png]: /images/20220829/eb366d2553d54d56b689a385b99593d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，770人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：小物块运动轨迹动画

Openlayers地图在做轨迹的时候，除了标注各个位置点，连线，还经常会用到轨迹动画。本实战就是这样示例，一个物块在轨迹上移动。其实质是用setInterval，每个一小段

快来打我*/ 2024年03月17日 17:01/ 0 赞/ 115 阅读

相关行星轨迹制作_行星运动轨迹的程序实现

//三体问题的导数曲线 class ThreeBody : publicDifferentiationFunction \{public: ThreeBody() \{

àì夳堔傛蜴生んèń/ 2023年01月10日 03:49/ 0 赞/ 177 阅读

相关添加轨迹运动_GPX轨迹导入运动手表的方法

以佳明935手表和高驰APEX手表为例，介绍GPX轨迹导入运动手表的方法，导入GPX轨迹主要用于手表轨迹导航。一、佳明935手表GPX导入方法介绍两种GPX轨迹导入

布满荆棘的人生/ 2023年01月07日 10:09/ 0 赞/ 1552 阅读

相关 svg+css3行星运动轨迹

[下载地址][Link 1]使用svg和css3实现的行星运动轨迹特效，行星围绕地球转动。 ![1630568025.png][] dd: [Link 1]: http

冷不防/ 2022年09月10日 06:24/ 0 赞/ 231 阅读

相关 css动画设置运动轨迹,css3动画之圆形运动轨迹

![c4468b3f4df77e96b0a416fa2a870fba.png][] css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效

ゝ一世哀愁。/ 2022年09月02日 14:58/ 0 赞/ 771 阅读

相关 Cesium根据轨迹数据模型运动

var _start = Cesium.JulianDate.fromDate(new Date(2021, 07, 31, 11)); function my

刺骨的言语ヽ痛彻心扉/ 2022年09月02日 05:21/ 0 赞/ 569 阅读

相关光点沿圆角按钮运动轨迹动画

Demo [http://xuanfengge.com/demo/201506/spark/spark-button.html][http_xuanfengge.

╰半夏微凉°/ 2022年08月21日 05:53/ 0 赞/ 196 阅读

相关 css3动画，设置动画基点

@-webkit-keyframes swing \{ 50% \{ -webkit-transform: rotate(10deg);

我会带着你远行/ 2022年08月04日 13:52/ 0 赞/ 257 阅读

相关 CSS animation动画:实现台球运动效果

CSS animation动画:实现台球运动效果在学习animation动画的时候，我就得这个特别有意思，以后还想制作其他的超酷的效果，以前觉得弄特效的特别帅，感觉现在

待我称王封你为后i/ 2022年03月08日 06:51/ 0 赞/ 371 阅读

相关 css动画形变、运动、3d详解

要产生动画过渡效果,必须要有属性的变化,初始设置不能产生动画 transform变化: 以' '空格分隔,可以一次写多个变化同个

蔚落/ 2021年07月24日 21:13/ 0 赞/ 548 阅读