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,就可以无限循环了。

总结

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

相关推荐
wycode几秒前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
用户10922571561016 分钟前
你以为的 Tailwind 并不高效,看看这些使用误区
前端
意会30 分钟前
微信闪照小程序实现
前端·css·微信小程序
onejason30 分钟前
《利用 Python 爬虫获取 Amazon 商品详情实战指南》
前端·后端·python
用户67375280188434 分钟前
鸿蒙开发:应用内如何做更新
前端
zxhnext1 小时前
LLM大语言模型入门
前端·后端
知心宝贝1 小时前
写了那么久的前端,你真的了解浏览器背后的“小动作“吗?
前端·程序员·浏览器
wycode1 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
维李设论1 小时前
前端智能化 | AG-UI实践及原理浅析
前端·aigc·agent
第七种黄昏1 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js