一、过渡
通过过渡可以指定⼀个属性发⽣变化时的切换⽅式,平滑的过渡 需要在某种条件下触发,例如hover、active、focus情况下 ⼀次性的效果,不能循环,只能做简单的动画 只有两帧,设置动画初始值和结束值 IE10开始兼容,移动端兼容良好
1、哪些属性要过渡(选填)
transition-property: all;
2、 过渡的时间 ms/s 必写
transition-duration: 3s;
3、过渡变化曲线 选写
transition-timing-function: ease;
4、 过渡的延迟 选写 默认是0s
transition-delay: 2s;
5、 过渡的简写,过渡的时间是必写的,其他都有默认值
transition: all ease 2s 0s;
二、动画
动画的理解:动画和过渡类似,都是可以实现⼀些动态效果,不同的是过渡需要在某个属性发⽣变化时才能触发, 例如hover,acitve时,动画可以⾃动触发动画
调用动画首先要写关键帧
2.1、制定关键帧⽤的是@keyframes属性,指定关键帧主要有两种⽅法: ⽅法⼀: @keyframes 关键帧名称{ from{初始状态属性} to{结束状态属性}} ⽅法⼆: @keyframes 关键帧名称{ 0%{初始状态属性} 50%(中间还可以再添加关键帧) 100%{结束状态属性}
注意: 1、帧的顺序可以更改,不关顺序问题。如果初始帧不写,默认是原始设置,如果结束帧不写, 默认也是原始设置 2、可以同时设置关键帧,⽤逗号(,)隔开就行
2.2、调用关键帧和动画属性
1、animation-name 绑定到选择器的关键帧 的名称,告诉系统需要 执行那个动画(必填)
2、animation-duration 动画的完成时间,告诉 系统动画持续的时长 (必填)
3、animation-timing-function 设置动画如何完成一个 周期,告诉系统动画执 行的速度(与过度动画 类型)
可选值:
ease 默认值, 慢速开始,先加速,然 后再减速 linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开 始和结束的过渡效果 steps()分布执行过渡 效果
4、animation-delay 动画在启动前的延迟间 隔
5、animation-iteration-count 动画的播放次数,告诉 系统动画需要执行几次 infinite无限次往返执行
6、animation-direction 指定是否应给轮流反向 播放动画
可选值:
normal 默认值: 从 from向to运行,每次都是 这样 reverse 从to到from运 行,每次都是这样 alternate 从from向to运 行,重复执行动画时反向执 行 alternate-reverse 从to 向from运行,重复执行动 画时反向执 行
7、animation-fill-mode 规定当动画不播放时 (完成时,延时未开始 播放时),应用到的元 素样式
可选值:
none 默认值 动画执⾏完毕 元素回到原来的位置 forwards 动画执⾏完 毕,会停⽌在动画结束的位 置 backwards 动画延时等待 时,元素就会处于开始位置 both 结合了forwards和 ackwards的特点
8、animation-play-state 告诉系统当前动画是否 需要暂停 running 默认值 动画执 行 paused 动画暂停
9、animation简写 可以写以上任意 属性的可选值