动画animation
- 动画
- -过渡和动画之间的异同
- -animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画
- -animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长
- -animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度
- -animation-delay 设置动画在启动前的延迟间隔。
- -animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
- -animation-direction 指定是否应该轮流反向播放动画。
- -animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- -animation-play-state 告诉系统当前动画是否需要暂停
- -动画模块连写格式
- -动画模块连写格式的简写
- animate.css
- 2D转换模块
- -旋转 rotate
- -平移 translate
- -缩放 scale
- -综合转换连写格式
- -形变中心点
- -旋转轴向
- -perspective
- 属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身
动画
由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作
-过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
-animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画
告诉系统我们需要自己创建一个名称叫做animiationName的动画
通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。
关键帧：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
-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:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);
-动画模块连写格式的简写
animation:动画名称 动画时长;
animate.css
https://animate.style/
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轴进行旋转
transform: rotateZ(45deg);
围绕z轴旋转
transform: rotateX(45deg);
围绕x轴旋转
transform: rotateY(45deg);
围绕y轴旋转
-总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
-perspective
属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身
1.什么是透视
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
复习
1.伸缩盒/弹性盒
核心概念：给元素设置display:flex就成为伸缩盒，弹性元素沿着主轴方向进行排列，
主轴默认是水平方向，交叉轴默认是垂直方向。
2.容器属性：
display:
flex-direction 更改主轴排列方向
flex-wrap 设置是否换行显示 默认不换行
flex-flow flex-direction flex-wrap 简写
justify-content 设置弹性元素在主轴方向对齐方式
align-items 设置弹性元素在交叉轴对齐方式
align-content 设置弹性元素多行对齐方式
3.项目属性:
order 更改弹性元素排列顺序 值越大 越靠后
flex-grow 设置父容器有剩余空间是否占满 默认不占满 0
flex-shrink 设置父容器空间不足时是否进行等比例压缩 默认等比例压缩 1
flex-basis 设置弹性元素宽度 默认为auto 优先级高于width
flex:flex-grow flex-shrink flex-basis
number设置给一个弹性元素 将父容器剩余空间给到弹性元素
设置给多个弹性元素flex 就是number比例
align-self 更改弹性元素自身在交叉轴对齐方式
2.水平垂直居中 **********
1.给父元素设置display:flex 给子元素设置 margin:auto
2.给父元素设置display:flex;justify-content:center;align-items:center
3.过渡
元素发生改变不会立即生效
过渡需要手动触发 hover active @media
需要告诉系统哪一个元素需要过渡 持续时间
transition-property 设置过渡属性
transition-duration 设置过渡持续时间
transition-delay 设置过渡等待时长
transition-timing-function 设置过渡速度曲线
简写为transition:property duration timing-function delay;
4.动画
不需要手动触发
需要告诉系统哪一个元素需要动画 动画持续时间
1.定义动画关键帧
@keyframes 动画名称{
动画状态
from{} 开始状态
to{} 结束状态
0%{
}25%{}50%{}100%{}
}
2.给元素设置动画
animation-name 设置动画名称
animation-duration 设置动画持续时间
animation-timing-function 设置动画速度曲线
animation-delay 设置动画等待时长
animation-iteration-count 设置动画迭代次数 number infinite(无限循环)
