动画
- 1.动画
- 1.1 过渡和动画之间的异同
- 1.2 nimation-name 指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
- 1.3 animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长
- 1.4 animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度
- 1.5 animation-delay 设置动画在启动前的延迟间隔。
- 1.6 animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
- 1.7 aniamtion-directiion 指定是否应该轮流反向播放动画。
- 1.8 animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
- 1.9 animation-play-state 告诉系统当前动画是否需要暂停
- 1.10 动画模块连写格式
- 1.11 动画模块连写格式的简写
- 2.animate.css
- 3. 2D转换模块
1.动画
- 由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。
- Animations是css3 的一个模块,使用keyframes 定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。
- Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。
- 不需要了解任何Js技术即可完成动画的制作
1.1 过渡和动画之间的异同
- 不同点
- 过渡必须人为的触发才会执行动画
- 动画不需要人为的触发就可以执行动画
- 相同点
- 过渡和动画都是用来给元素添加动画的
- 过渡和动画都是系统新增的一些属性
- 过渡和动画都需要满足三要素才会有动画效果
1.2 nimation-name 指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
告诉系统我们需要自己创建一个名称叫做animiationName的动画
通过
@keyframes
来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。
/*关键帧:*/
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
1.3 animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长
- time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。
1.4 animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始,然后加快,在结束前变慢。
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
1.5 animation-delay 设置动画在启动前的延迟间隔。
- time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0
1.6 animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
- n 一个数字,定义应该播放多少次动画
- infinite 无限次执行
1.7 aniamtion-directiion 指定是否应该轮流反向播放动画。
- normal 默认的取值,执行完一次之后会到起点继续执行下一次
- alternate 往返动画, 执行完一次之后往回执行下一次
- reverse 反向执行
1.8 animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
- none: 不做任何改变
- forwards: 让元素结束状态保持动画最后一帧的样式
- backwards: 让元素等待状态的时候显示动画第一帧的样式
- both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
1.9 animation-play-state 告诉系统当前动画是否需要暂停
- running: 执行动画
- paused: 暂停动画
1.10 动画模块连写格式
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
1.11 动画模块连写格式的简写
animation:动画名称 动画时长;
2.animate.css
- 引入animate的cdn或本地animate.css文件
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
- 给指定元素加入class"animate__animated <动效名称>"
<div class="animate__animated animate__fadeInUpBig">你好 animate</div>
3. 2D转换模块
transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。
3.1 旋转 rotate
transform: rotate(45deg);
其中deg是单位, 代表多少度
3.2 平移 translate
transform: translate(100px, 0px);
第一个参数:水平方向
第二个参数:垂直方向
3.3 缩放 scale
transform: scale(1.5);
transform: scale(0.5, 0.5);
第一个参数:水平方向
第二个参数:垂直方向
注意点:
- 如果取值是1, 代表不变
- 如果取值大于1, 代表需要放大
- 如果取值小于1, 代表需要缩小
- 如果水平和垂直缩放都一样, 那么可以简写为一个参数
3.4 综合转换连写格式
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2. 2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的,而是按照旋转之后的角度进行平移。
*/
3.5 形变中心点
transform-origin: n1 n2;
第一个参数:水平方向
第二个参数:垂直方向
注意:取值有三种形式
1.具体像素
/*transform-origin: 200px 0px;*/
2.百分比
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
3.特殊关键字
/*transform-origin: center center;*/
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点
3.6 旋转轴向
- 默认情况下所有元素都是围绕Z轴进行旋转
transform: rotateZ(45deg);
围绕z轴旋转
transform: rotateX(45deg);
围绕x轴旋转
transform: rotateY(45deg);
围绕y轴旋转
- 总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
3.7 perspective属性
perspective属性定义3D元素距视图的距离,以像素计。该属性允许改变3D元素查看3D元素的视图。
当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身
注意:perspective 属性只影响 3D 转换元素。
- 什么是透视
近大远小 - 注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面