Css3梳理篇——animation(动画)

1、 animation

name --动画名

duration --设置动画所需时间(先)

timing-function --动画类型(线性 linear)

delay --延迟时间(后)

iteration-count --动画的播放次数(无限循环 infinite / n --n次)

direction --方向(正向/反向reverse)

fill-mode; --动画之外的状态(forwards)


2、animation-play-state(一般单独使用)

动画的播放状态(播放/暂停)

播放--running

暂停--paused


3、代码

css 复制代码
.earth-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    z-index: 2;
    /* TODO:待补充代码,添加动画 */
    /* 复合属性 */
    animation: orbit 36.5s linear infinite;
    /* 单独只用 */
    animation-play-state: running;
    animation-play-state: paused;
    
}
相关推荐
玄魂4 分钟前
开源之夏2025-VisActor 社区题目及参赛者选/培介绍
前端·开源·资讯
camellia5 分钟前
SpringBoot(二十四)SpringBoot集成redis哨兵集群
java·前端·后端
YH丶浩8 分钟前
React 实现爱心花园动画
前端·react.js·前端框架
啵啵学习15 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia21 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia22 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder38 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh44 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_878454531 小时前
thymeleaf的使用和小结
前端·javascript·学习
brzhang1 小时前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github