web前端学习(十三)animation动画
动画
由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作
-过渡和动画之间的异同
- 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以执行动画
- 1.2相同点 过渡和动画都是用来给元素添加动画的 过渡和动画都是系统新增的一些属性 过渡和动画都需要满足三要素才会有动画效果
-animation-name 指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
告诉系统我们需要自己创建一个名称叫做animiation-name的动画
-animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长
time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。
-animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
-animation-delay 设置动画在启动前的延迟间隔。
time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0
-animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
n 一个数字,定义应该播放多少次动画 infinite 无限次往返执行
-animation-direction 指定是否应该轮流反向播放动画。
normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行
-animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
-animation-play-state 告诉系统当前动画是否需要暂停
running: 执行动画
paused: 暂停动画
-动画模块连写格式
animation:动画名称(animiation-Name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。
关键帧: @keyframes animiation-Name{ keyframes-selector{ css-style; } }
-动画模块连写格式的简写
animation:动画名称 动画时长;
animate.css
Animate.css | A cross-browser library of CSS animations.
1.引入animate的cdn或本地animate.css文件
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
2.给指定元素加入class"animate__animated <动效名称>"
<div class="animate__animated animate__fadeInUpBig">你好 animate</div>
2D转换模块
transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。
-旋转 rotate
transform: rotate(45deg); 其中deg是单位, 代表多少度
-平移 translate
transform: translate(100px, 0px); 第一个参数:水平方向 第二个参数:垂直方向
-缩放 scale
transform: scale(1.5);
transform: scale(0.5, 0.5);
第一个参数:水平方向 第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
-综合转换连写格式
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/* 注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的 */
-形变中心点
transform-origin: 第一个参数:水平方向 第二个参数:垂直方向
注意点
取值有三种形式
具体像素
/transform-origin: 200px 0px;/
百分比
/transform-origin: 50% 50%;/ /transform-origin: 0% 0%;/
特殊关键字
/transform-origin: center center;/
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
-旋转轴向
-默认情况下所有元素都是围绕Z轴进行旋转
围绕z轴旋转 :transform: rotateZ(45deg);
围绕x轴旋转 : transform: rotateX(45deg);
围绕y轴旋转 :transform: rotateY(45deg);
-总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
-perspective
属性定义3D元素距视图的距离,以像素计,该属性允许改变3D元素查看3D元素的视图,当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身
1.什么是透视 近大远小
2.注意点 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
web前端学习(十三)animation动画相关推荐
- web 前端学习线路图
web 前端学习线路图 一.HTML 教程 HTML教程 HTML简介 HTML编辑器 HTML基础 HTML元素 HTML属性 HTML标题 HTML段落 HTML样式 HTML格式化 HTML引用 ...
- Web前端学习路线分享,初学者不要错过!
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
- Web前端学习第四周
Web前端学习第四周 position定位 指定一个元素在文档中的定位方式 top,right,left,bottom属性决定最终位置 position取值 static(默认) relative a ...
- 零基础web前端学习路线【全新web前端入门视频教程】
零基础怎么学web前端?下面就一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础 前端学习路线分享给大家. 适合零基础学员 ...
- 深圳Web前端学习:5G对Web前端发展的影响--千锋
深圳Web前端学习:5G对Web前端发展的影响–千锋 5G浪潮的来临让全世界都为之关注,各个国家都在争夺它的主导权.它对软件行业影响是巨大的,深远的,甚至会导致行业的重新洗牌,和很多技术工种的兴衰.所 ...
- 【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签 文本 标题标签 h 段落标签 ...
- Web前端学习第五周
Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...
- Web前端学习win11
Web前端学习win11 一.第一部分 1.1什么是HTML.CSS 1.2VS code 1.3深入了解网站开发 二.第二部分 2.1初始代码 2.2 注释 2.3HTML语义化 2.4标题与段落 ...
- web前端学习之前端重构方案,来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
- Web前端学习书籍推荐
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐.正在从事web前端工作的小伙伴们都知道,想要从事前端行业,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书 ...
最新文章
- 10 款 VS Code 插件神器,第 7 款超级实用!
- 从windows上传文件到linux,中文名乱码解决方法
- spring cloud config注意点(疑问)
- Windows10熄屏自动断开WiFi连接解决方法
- 抽象类和接口有什么区别?
- page rank算法
- sizeof 计算struct大小
- OpenGL fragmentlist片段列表的实例
- Git本地仓库文件的创建、修改和删除
- Spring的国际化(转载)
- 【BZOJ3576】江南乐,博弈
- 用汇编的眼光看C++(之算术符重载陷阱)
- 电商渠道转化越来越低,究竟怎样引流才能提高转化率?
- Oracle Siebel CRM技术的前景
- ReduceTask工作机制图解
- 作业2-Python基础练习
- VS中读取NMEA数据进行定位精度分析
- 如何用计算机计算以2为底的对数,log以2为底3的对数计算器怎么写
- Tomcat开启APR运行模式,优化并发性能
- linux shell 脚本复制特定后缀文件到另外一个文件夹下