css 动画基础知识和案例

想要更好的掌握知识,可以常识将知识教授出来。这就是写这篇文章的目的。

animation基础知识

animation:创建动画的意思;其中的属性有:animation:属性,执行时间 显示方式 执行次数。

animation: 执行动画名称 执行时间(50s 代表50s执行一个循环) 执行速度(linear 代表匀速) 重复次数(infinite 代表无限次);如

css 复制代码
.mover_slow {
  animation: orderMover 50s linear infinite;
}

/**动画名称**/
@keyframes orderMover {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX( calc(-100% - 1710px ) );
  }
}

animation-state: plaused (暂停) /running (执行中)

遇到的问题

1、在动画结束时,如何保持最终的动画状态?如何保持开始的状态?

2、如何让动画暂停?

animation-state:plaused;

3、from to 和百分比写法有什么不同?

from to:只有开始和结尾的状态;而百分比写法可以用多种状态,如20%、30%等,滚动到不同的程度,执行不同的动画效果。可以按照自己的需求分为多段动画。

4、如何是动画循环播放或者指定循环动画?

重复次数改为infinite,就可以无限循环了。

总结

说和做真的不是一回事。在想的时候,想的很清楚,但做的时候,做的细节上的填写以及原来的实现,都开始模糊了。

相关推荐
Mintopia14 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia16 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub19 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw22 分钟前
hippy的主要原理
前端
子兮曰25 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068825 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97628 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖28 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk29 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端
薛定谔的算法29 分钟前
手写React:从Dideact理解前端框架的核心原理
前端·react.js·架构