文章目录
一、animation是什么?
Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。
过渡和动画之间的异同
-
不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画 -
相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
animation-name
指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
- 通过@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: //暂停动画
告诉系统当前动画是否需要暂停
二、transform
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后面加上哪个轴即可